iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
1
Modern Web

Vue.js 30天隨身包系列 第 7

Day07 - 基本Webpack專案運作流程

在大致了解以webpack樣板建置的專案架構後,我們接下來來了解整個app運作流程。

當我們下npm run dev這個指令後,啟動http server,這個指令會同時開啟根目錄下的index.html與src資料夾內的main.js這兩個檔案

https://ithelp.ithome.com.tw/upload/images/20180117/201076733G2mB9i68k.png

https://ithelp.ithome.com.tw/upload/images/20180117/201076736HIAtMBSGd.png

而main.js會同時運行App.vue以及在router資料夾內的index.js

https://ithelp.ithome.com.tw/upload/images/20180117/20107673WBhdrsy9Fj.png

</router-view>是路由器顯示標籤,為vue-router使用,在index.js下Router函數中所使用的UI元件皆會套用至這個標籤當中。

index.js中,可以在Router這個函數內,自定義url路徑名稱(path),components下可以放入寫好的UI元件。

https://ithelp.ithome.com.tw/upload/images/20180117/20107673nKqrjUECc9.png

因此,如果我們要產生新的UI元件,就要寫一個.vue檔,可放置在components資料夾之下;如果我們要將這個vue元件顯示出來,就需要到index.js中修改路由配置,下面舉例實作看看。

實作:新增一個顯示Hello Vue的component

在components資料夾內先新增一個testhello.vue的檔案

https://ithelp.ithome.com.tw/upload/images/20180117/20107673zxhxFLE1yR.png

然後修改index.js,新增一個新的url路徑與components

https://ithelp.ithome.com.tw/upload/images/20180117/20107673Ihrka25D2E.png

最後下指令啟動server後,瀏覽器輸入http://localhost:8080/#/testhello,會如下圖所示

通常如果沒按Ctrl+C停止server,網頁會自動更改,不用按F5,只是網址要更動

https://ithelp.ithome.com.tw/upload/images/20180117/20107673NptAdBix7j.png


參考資料


上一篇
Day06 - 熟悉Webpack專案架構
下一篇
Day08 - [Directives] 資料綁定(Data Binding)
系列文
Vue.js 30天隨身包30

尚未有邦友留言

立即登入留言