參考：https://www.jianshu.com/p/4d41c17844fc

概述:

vue-cli作用有哪些:
1.快速生成本地目錄結構
2.本地開發除錯
3.程式碼部署
4.熱載入，方便測試
5.單元測試

安裝

1.安裝node環境

• 官網下載可執行檔案，按照一般軟體安裝*

node-v //檢視版本資訊

2.安裝npm 環境(一般會隨著node安裝，自帶)
*npm : node包管理器(Node Package Manager) *

npm install npm -g //安裝
npm -v //檢視版本資訊

作用：
允許使用者從NPM伺服器下載別人編寫的第三方包到本地使用。
允許使用者從NPM伺服器下載並安裝別人編寫的命令列程式到本地使用。

3.安裝vue-cli 環境

• 安裝
  vue-cli 2版本安裝方式
  npm install -g vue-cli

• 檢視版本資訊
  vue --version
vue -V

• 檢視常用功能
  vue

• 檢視模板型別
  vue list

模板名稱(官方5種模板)：

• webpack-一個全面的webpack+vue-loader的模板，功能包括熱載入，linting,檢測和CSS擴充套件。
• webpack-simple-一個簡單webpack+vue-loader的模板，不包含其他功能，讓你快速的搭建vue的開發環境。
• browserify-一個全面的Browserify+vueify 的模板，功能包括熱載入，linting,單元檢測。
• browserify-simple-一個簡單Browserify+vueify的模板，不包含其他功能，讓你快速的搭建vue的開發環境。
• simple-一個最簡單的單頁應用模板。

4.在目標資料夾，初始化專案
語法:
例：初始化專案 使用webpack模板 建立專案資料夾

vue init webpack <專案資料夾名稱>

如果版本為3.0以上，需要使用2.0命令的話，會報錯

 Command vue init requires a global addon be installed.

需要 全域性安裝一個橋接工具

npm install -g @vue/cli-init and try again
 

詳細格式：
vue init <模板名稱> <專案名稱>

初始化後，配置資訊

• Project name :
  專案名稱 ，不能使用佔用字，如：webpack
• Project description:
  專案描述，預設為A Vue.js project,直接回車，不用編寫。
• Author：
  作者，如果你有配置git的作者，他會讀取
• 構建模式：
  Runtime+Compiler
• Install vue-router?
  是否安裝vue的路由外掛
• Use ESLint to lint your code?
  是否用ESLint來限制你的程式碼錯誤和風格
• setup unit tests with ?
  是否需要安裝單元測試工具。
• Setup e2e tests with Nightwatch?
  是否安裝e2e來進行使用者行為模擬測試。
• 安裝模組方式
  手動安裝

完成後會提示(to get started:)

cd 專案名稱
npm run dev

通過命令列中輸入，完成跳轉檔案，開啟伺服器 (ctrl+C退出伺服器)

vue-cli 2與 vue-cli3的區別

說明：
vue-cli 2 與 vue-cli 3 是vue2.x的不同版本的腳手架工具
vue-cli 3是 vue-cli 2的升級版本
Vue-cli3 目錄結構與配置方式、執行，不同於vue-cli2

安裝：
npm install @vue/cli -g

如果全域性安裝了vue-cli2則需要先解除安裝，再安裝vue-cli3

npm uninstall vue-cli -g
npm install @vue/cli -g

通過vue -V檢視是否安裝3.0版本成功
建立專案：

vue create project-name

按提示選擇基本配置
根據提示資訊配置：
選擇預製
1.預設 (Babel+ESLint) 的設定
2.手動選擇功能 ( Manually select features )

手動選擇功能列表：
（通過上下鍵切換，空格確認/取消）

• Babel : 將ES6編譯成ES5
• TypeScript: javascript型別的超集
• Progressive Web App (PWA) Support: 支援漸進式的網頁應用程式
• Router:vue-router
• Vuex: 狀態管理
• CSS Pre-processors: CSS預處理
• Linter / Formatter: 開發規範
• Unit Testing: 單元測試
• E2E Testing: 端到端測試

啟動專案

npm run serve

手動建立 vue.config.js
區別於cli2環境變數通過（NODE_ENV）區分開發、測試、生產
cli3環境變數都在獨立檔案中（.env.test 、.env.development、.env.production）
在 package.json 的 scripts 命令中新增對應的 mode

'serve':'vue-cli-service serve --mode development',
'build':'vue-cli-service build --mode production',
'lint':'vue-cli-service lint --mode test'