Vue CLI介紹
Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統，提供：
通過 @vue/cli 搭建互動式的項目腳手架。
通過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。
一個運作時依賴 (@vue/cli-service)，該依賴：
可更新；
基于 webpack 建構，并帶有合理的預設配置；
可以通過項目内的配置檔案進行配置；
可以通過插件進行擴充。
一個豐富的官方插件集合，內建了前端生态中最好的工具。
Vue CLI 緻力于将 Vue 生态中的工具基礎标準化。它確定了各種建構工具能夠基于智能的預設配置即可平穩銜接，這樣你可以專注在撰寫應用上，而不必花好幾天去糾結配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性，無需 eject
預設你已經安裝了nodejs
一.安裝vue-cli 3.0
1.安裝：
npm install -g @vue/cli
二.建立項目
2.建立vue-myAapp項目：
vue create vue-app
3.項目配置：
預設配置
手動配置：babel ts 預編譯 等等… 【選擇這個】
以下是我選擇的配置（可以直接按數字鍵1,2,3,4進行選擇）
Babel：将ES6編譯成ES5
TypeScript：JS超集，主要是類型檢查
Router和Vuex，路由和狀态管理
Linter/ Formatter：代碼檢查工具
CSS Pre-processors：css預編譯 (稍後會對這裡進行配置)
Unit Testing：單元測試，開發過程中前端對代碼進行自運作測試
Use class-style component syntax? (Y/n) y
是否使用Class風格裝飾器？
即原本是：home = new Vue()建立vue執行個體
使用裝飾器後：
class home extends Vue{}
Use Babel alongside TypeScript for auto-detected polyfills? (Y/n) y
使用Babel與TypeScript一起用于自動檢測的填充? yes
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
路由使用曆史模式? 這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面
使用什麼css預編譯器？ 我選擇的 stylus
tslint: typescript格式驗證工具
eslint w...: 隻進行報錯提醒； 【選這個】
eslint + A...: 不嚴謹模式；
eslint + S...: 正常模式；
eslint + P...: 嚴格模式
代碼檢查方式：我選擇儲存時檢查
多環境配置
因為公司有 開發環境 ，測試環境，聯調環境，線上環境 。減少人為配置，一次配置對原則。是以在2.0.x 增加了“package.json “tt”: “node build/tt-build.js”” 類型的配置，配置不了不少檔案。 在 vue-cli 3.0.x 裡面支援 “.env” 檔案配置 ,我這裡增加
“.env.development” ， “.env.production”和“.env.test”
配置 。
1. 基本對應和預設
development is used by vue-cli-service serve
production is used by vue-cli-service build
test is used by vue-cli-service test
2.指定配置啟動
增加其他配置，需要下面指定配置 。
"dev-build": "vue-cli-service build --mode development",
3.”.env “配置檔案編寫
配置檔案内容格式如下 ，
VUE_APP_*
例如：”.env.production” 内容如下
VUE_APP_MOCK_URL = 'https://xxx.xxx.xxx/restapi/'
4. 調整用環境配置
console.log(process.env.VUE_APP_MOCK_URL);
process.env.NODE_ENV // 特定
BASE_URL // vue.config.js 配置