目錄
（一）vue-cli 命令
1. vue-cli下載安裝：
-
vue-cli2:
npm install vue-cli -g -
vue-cli3/cli4:
npm install -g vue@cli
2. 創建新項目
-
vue-cli2:
vue init webpack 2.0project -
vue-cli3/cli4:
vue create 3.0project或通過視圖創建項目：
vue ui
3. 啓動項目
-
vue-cli2:
npm run dev -
vue-cli3/cli4:
npm run serve
（二）項目結構
vue-cli3/cli4中移除了配置文件目錄：config 和 build 文件夾。
同時移除了 static 靜態文件夾，新增了 public 文件夾，將 index.html 移動到 public 中。
1. vue-cli2
|-- build // 項目構建(webpack)相關代碼
| |-- build.js // 生產環境構建代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- utils.js // 構建工具相關
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發環境配置,構建開發本地服務器
| |-- webpack.prod.conf.js // webpack生產環境配置
|-- config // 項目開發環境配置
| |-- dev.env.js // 開發環境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產環境變量
|-- src // 源碼目錄
| |-- components // vue公共組件
| |-- router // vue的路由管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件，加載各種公共組件
|-- static // 靜態文件，比如一些圖片，json數據等
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 項目說明
|-- index.html // 入口頁面
|-- package.json // 項目基本信息,包依賴信息等
推薦閱讀：
2. vue cli3/cli4
|-- src // 源碼目錄
| |-- components // vue公共組件
| |-- router // vue的路由管理
| |-- App.vue // 頁面入口文件
| |-- main.js // 程序入口文件，加載各種公共組件
|-- public // 靜態文件，比如一些圖片，json數據等
| |-- favicon.ico // 圖標文件
| |-- index.html // 入口頁面
|-- vue.config.js // 是一個可選的配置文件，包含了大部分的vue項目配置
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義代碼格式
|-- .gitignore // git上傳需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 項目說明
|-- package.json // 項目基本信息,包依賴信息等
（三）設置環境變量
項目開發過程中，至少會經歷開發環境、測試環境和生產環境(即正式環境)三個階段。
不同階段請求的狀態(如接口地址等)不盡相同，若手動切換接口地址是相當繁瑣且易出錯的。於是環境變量配置的需求就應運而生，我們只需做簡單的配置，把環境狀態切換的工作交給代碼。
1. vue-cli2:
推薦閱讀：
2. vue-cli3：
vue-cli3構建的項目中默認只有development模式和production模式，默認的NODE_ENV分別是development和production，很多配置也只依據NODE_ENV區分這2種模式。
但當我們需要其他模式，如測試模式時，就需要添加相關配置。
詳細設置過程，推薦看：
補充：
在 .env.[mode] 模式文件中，三個環境變量及其含義：
NODE_ENV（對應當前模式的名稱）VUE_APP_RUNTIME_ENV（對應當前環境的名稱）VUE_APP_BASE_URL（當前環境向後臺發請求的baseurl）
使用環境變量：
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。
在js文件或者在vue文件中process.env.{環境變量名}，比如上文定義的VUE_APP_BASE_URL，使用process.env.VUE_APP_BASE_URL即可獲取環境變量的值。
在html文件中使用環境變量，採用模板引用指令<%= process.env.process.env.{環境變量名} %>，比如
<script src="xxx.com" app_id="<%= process.env.process.env.MY_APP_ID %>"/>
3. vue-cli4
vue-cli4 和 vue-cli3在環境變量設置和使用上差別不大。
推薦閱讀：