（一）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 // 項目基本信息,包依賴信息等
推薦閱讀：vue-cli項目結構詳解
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:
推薦閱讀：vue-cli如何添加多種環境變量
2. vue-cli3：
vue-cli3構建的項目中默認只有development模式和production模式，默認的NODE_ENV分別是development和production，很多配置也只依據NODE_ENV區分這2種模式。
但當我們需要其他模式，如測試模式時，就需要添加相關配置。
詳細設置過程，推薦看：vue-cli如何添加多種環境變量
補充：
在 .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在環境變量設置和使用上差別不大。
推薦閱讀： vue cli4-環境變量和模式