iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 2
1
Modern Web

JavaScript 音樂漫遊 - 30 天探索 Web Audio!系列 第 2

01. 基礎建設

馬上要開始介紹 Web Audio API 了,總要有個網站來呈現各種內容吧;既然要學東西,那就順便把不熟的 Vue 架起來玩一玩囉!

開始之前

筆者預期讀者您已經準備好 Node.js 及 套件管理工具 (npm / yarn),並能理解 ES6 的語法。而 Vue 相關的語法,由於本文主軸不在這邊,且大部分不太影響閱讀,筆者不會刻意介紹。

Vue

前陣子 Vue Cli 3 推出了,增加了 UI 介面,讓不熟悉命令列的開發者可以透過 UI 勾勾選選快速建置專案,真的非常方便!不過這邊不會使用 UI 介面,而是使用傳統的 cli 指令完成

Vue

安裝

首先是安裝 Vue Cli。在安裝前,先確認你的電腦已經有安裝好 node & npm/yarn,隨後在終端機輸入:

yarn global add @vue/cli

接著是開啟專案,只要輸入:

vue create web-audio

並依著提示勾選需要的功能,這樣專案就建好囉!

執行

來確認一下專案是否能順利啟動吧:

yarn

yarn run serve

等待服務啟動。當啟動完成時,應該會看到終端機的提示如下:
terminal

服務開在 localhost:8080,應該會看到這樣的畫面:
localhost

確認服務正確啟動後,再來簡單做一下頁面切換吧。
利用 Vue Router 的特性,導覽頁籤一下就完工囉:

nav

做到這,也就大致完成基礎建設啦~
如果對於 Vue.js 有興趣,想要找更詳細的教學,這邊推薦我們團隊成員的 Vue 系列文章:

也可以來看看我們 浪流連九程式匠自然產生的佛系碼農專區 中,有沒有其他讀者感興趣的主題,歡迎一併訂閱追蹤喔!

第一天就先這樣,明天就要進入正題囉!

筆者

Gary

半路出家網站工程師;半生熟的前端加上一點點的後端。
喜歡音樂,喜歡學習、分享,也喜歡當個遊戲宅。

相信一切安排都是最好的路。


上一篇
00. 出發前準備
下一篇
02. Web Audio API
系列文
JavaScript 音樂漫遊 - 30 天探索 Web Audio!31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
abbienew
iT邦新手 5 級 ‧ 2019-05-17 22:15:12

學習時發現Vue建立頁面比想像中遇到更多障礙(囧
不知道能不能詳細解釋!

看更多先前的回應...收起先前的回應...
Gary iT邦新手 5 級 ‧ 2019-05-17 22:24:25 檢舉

由於這系列文主要不是在介紹 Vue,就快速帶過了;能不能請您大概說明一下,具體的障礙點在哪呢~

abbienew iT邦新手 5 級 ‧ 2019-05-20 17:06:21 檢舉

啊,不知道該如何以VueRouter的特性製作導覽頁籤,謝謝

Gary iT邦新手 5 級 ‧ 2019-05-20 20:03:19 檢舉

這部分,Vue Router 的文件 寫的蠻清楚的;需要程式碼範例的話,你也可以直接參考 我的鐵人賽專案

要實作導覽頁籤,主要需要完成幾件事情:

  1. 建立頁面
  2. router.js 中定義頁面
  3. 透過 <router-link> 連結頁面

1 的部分就看你自己想做什麼內容,自行發揮你的創意。
2 的話,你需要在 router.js 中設定每一組 router 的名字、路徑與要用的 component:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import('./views/Index.vue')
    },
    {
      path: '/web-audio-api',
      name: 'WebAudioApi',
      component: () => import('./views/WebAudioApi.vue')
    },
    ...
  ]
})

3 的部分,就在你想要放連結的地方加上:

<router-link to="/">Main</router-link>
<router-link to="web-audio-api">Web Audio Api</router-link>
...

這樣就完成囉,很簡單對吧~

abbienew iT邦新手 5 級 ‧ 2019-05-21 14:41:13 檢舉

是...我有點把他想難了。以為有用到vue-sidebar-menu製作 !謝謝回覆!

我要留言

立即登入留言