webpak準備工作:
cnpm install webpack
webpack-dev-server
vue-loader
vue-html-loader
css-loader
vue-style-loader
vue-hot-reload-api
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime

webpack+vue-loader
webpack載入模組
1. npm install 或者 cnpm install
2. npm run dev
-> package.json
“scripts”:{
“dev”:”webpack-dev-server –inline –hot –port 8080”
}
以後下載模組：
npm install –save-dev

報EADDRINUSE這個錯的意思是 埠被佔用

路由:
vue-router
配合vue-loader使用:
1. 下載vue-router模組
cnpm install vue-router
2. import VueRouter from ‘vue-router’
3. Vue.use(VueRouter);
4. 配置路由
var router=new VueRouter();
router.map({
路由規則
})
5. 開啟
router.start(App,’#app’);

注意:
之前: index.html  ->   <app
 
></app>
現在: index.html  ->   <div id="app"></div>
App.vue ->   需要一個 <div id="app"></div>  根元素

程式碼壓縮、上線用
npm run build
-> package.json
“scripts”:{
“dev”:”webpack -p”
}

腳手架:
vue-cli——vue腳手架
幫你提供好基本專案結構

本身整合很多專案模板:
simple 個人覺得一點用都沒有
webpack 可以使用(大型專案)
Eslint 檢查程式碼規範，
單元測試
webpack-simple 沒有程式碼檢查

基本使用流程:
1. npm install vue-cli -g 安裝 vue命令環境
驗證安裝ok?
vue –version
2. 生成專案模板
vue init <模板名> 本地資料夾名稱
3. 進入到生成目錄裡面
cd xxx
npm install
4. npm run dev