聯成電腦分享：最熱門的網頁前端框架，流程架構實作Vue.js 網頁篇
Photo credit：Pexels
文、意如老師
續上一篇：聯成電腦分享：最熱門的網頁前端框架，從零開始學Vue.js 安裝篇
任務一：認識目錄結構
任務二：了解整個流程，及實作第一個Vue.js網頁
任務一：認識目錄結構
續 上一篇安裝好後，先到專案資料夾下，目前的目錄結構如下圖
我們先來認識一下幾個比較常會用到的資料夾
資料夾
說明
build
這個資料夾中可以放一些環境的配置
例如開發時用的程式版本node.js或是npm的版本等等
有關環境配置的檔案都會放在此資料夾內
config
程式常會使用的目錄路徑,或者port號等等的資訊會放在此資料夾下
node_modules
會使用到的套件都會放在此資料夾下，也是安裝npm時會附帶的套件
src
開發的項目都會放在此資料夾內
例如我們寫的程式碼就全都會放在src這個資料夾內
src/assets/css
放置會使用到的CSS
src/assets/images
放置會使用到的圖片，如icon,logo等圖
src/components
放置組件
src/App.vue
功能的入口
main.js
核心的文件也是整個專案的主要入口點，透過它連接到這個專案主要的根(功能)App.vue
static
靜態資源目錄，如圖片、字體等，
放在這個資料夾，不會被webpack處理。
test
初始測試目錄，可刪除
.xxxx文件
這些是一些配置文件，包括語法配置，git配置等
index.html
首頁入口文件
package.json
專案配置文件
README.md
專案的說明文檔，markdown 格式
babel
babel是一個轉碼器，因為目前瀏覽器對於新型態JavaScript語法支援度不高，babel-loader可將ES6或ES7語法轉為支援度高的ES5的語法。
ESLint
ESLint目的是改善程式碼品質，發現與調整程式碼的問題達到一致性，所以有安裝此套件的話，常常會在編譯執行時看到很多警告訊息，如果安裝之後想要忽略ESLint檢查，可以到.eslintignore文件中做修改。
任務二：了解整個流程，及實作第一個vue.js網頁
首先開啟專案的主要入口點main.js以及index.html
接著修改main.js檔案，如下圖
▶ Index.html 為專案開始的樣板，預設要顯示的網頁內容顯示於
div id=app/div 中。
▶ main.js程式解說：
var myvue = new Vue({ }) //每個 Vue 都需要通過實例化
程式碼參考如下：
new Vue({
el: // index.html 中 id名為app
router: //傳入 vue-router元件(ES6)
components : //會使用到UI子元件(App.vue)
template ://表示html模板套用至App/ 的 el 的標籤
})
接下來cmd（命令提示字元）執行指令：npm run dev
這個指令會啟動http server，這個指令會同時開啟根目錄下的index.html與src資料夾內的main.js這兩個檔案
main.js也會同時運行App.vue以及在router資料夾內的index.js
▶ App.vue程式解說：
route-view/是路由器顯示標籤，為vue-router使用，在index.js下Router函數中所使用的UI元件皆會套用至這個標籤當中。
簡單的說這邊樣板設定會套用至main.js
▶ index.js程式解說：
index.js 是由路由配置，定義路徑和UI元件，可以在Router這個函數內，自定義url路徑名稱(path)，components下可以放入寫好的UI元件。
router-view/ 為Vue-router使用，這樣index.js Router 這個函數下寫的components才會顯示出來
所以我們要產生新的UI元件，就要寫一個.vue檔，可放置在components資料夾之下；如要顯示這個vue元件，就需要到index.js中修改路由配置。
例：在src/components 新增 mytest.vue
路徑：src/components/mytest.vue
程式碼參考如下：
template
div class=myfont
{{mymsg}}
/div
/template
script
export default{
data(){
return{
mymsg:hi,mymsg!
}
}
}
/script
style
.myfont{
background:yellow;
}
/style
再開啟路徑：src/router/index.js，程式碼參考如下：
import Vue from vue
import Router from vue-router
import HelloWorld from @/components/HelloWorld
import mytest from @/components/mytest
Vue.use(Router)
export default new Router({
routes: [
{
path: /,
name: HelloWorld,
component: HelloWorld
},
{
path: /mytest,
name: mytest,
component: mytest
}
]
})
執行結果：
到cmd（命令提示字元）執行 npm run dev
下指令啟動server（伺服器）後，瀏覽器網址列輸入http://localhost:8080/#/mytest，會如下圖所示，你的第一張vue.js網頁已經完成了。
啟動後，只要一修改程式碼，瀏覽器上的這張網頁也都會自動更新，最後如果要關閉專案執行只要在cmd（命令提示字元）中輸入：Ctrl+C即可關閉整個專案。
文章轉自菜鳥救星，未經授權請勿轉載，原文為：最熱門的網頁前端框架，了解流程架構及實作Vue.js網頁篇
FB粉絲團：https://www.facebook.com/lccnetzone
YouTube頻道：https://www.youtube.com/user/LccnetTaiwan
痞客邦Blog：http://lccnetvip.pixnet.net/blog
