1.簡介

vue-cli是一個vue腳手架，可以快速構造專案結構
vue-cli本身集成了多種專案模板：
    simple  很少簡單
    webpack 包含ESLint程式碼規範檢查和unit單元測試等
    webpack-simple 沒有程式碼規範檢查和單元測試
    browserify 使用的也比較多
    browserify-simple

2示例

2.1安裝vue-cli,配置vue命令環境

vue list會展示出全部模板

cnpm install vue-cli -g
vue --version
vue list

2.2 初始化專案，生成專案模板

語法：vue init 模板名  專案名

2.3 進入生成的專案目錄，安裝模組包

cd vue-cli-demo
cnpm install

2.4 執行

npm run dev  //啟動測試服務
npm run build //將專案打包輸出dist目錄，專案上線的話要將dist目錄拷貝到伺服器上

3. 使用webpack模板

vue init webpack vue-cli-demo2

ESLint是用來統一程式碼規範和風格的工具，如縮排、空格、符號等，要求比較嚴格

官網

問題Bug：如果版本升級到node 8.0 和 npm 5.0，控制檯會報錯：
    GET http://localhost:8080/__webpack_hmr net::ERR_INCOMPLETE_CHUNKED_ENCODING
解決方法：
    a)降低Node版本到7.9或以下
    b)修改build/dev-server.js檔案，如下：
        var hotMiddleware = require('webpack-hot-middleware')(compiler, {
          log: () => {},
          heartbeat:2000 //新增此行
        })
    參考：https://github.com/vuejs-templates/webpack/issues/731  
 

2使用webpack模板

vue init webpack vue-cli-wkh

不選vue-router

ESLint是用來統一程式碼規範和風格的工具，要求比較嚴格，縮排、空格、符號等

build裡面是配置檔案

assets:相關資源

components:元件