Vue CLI 3
https://cli.vuejs.org/zh/guide/
Vue CLI 是一個基于 Vue.js 進行快速開發的完整系統，提供：
通過
@vue/cli搭建交互式的項目腳手架。通過
@vue/cli+@vue/cli-service-global快速開始零配置原型開發。-
一個運行時依賴 (
@vue/cli-service)，該依賴：- 可升級；
基于webpack構建，并帶有合理的默認配置； - 可以通過項目內的配置文件進行配置；也就是我們的
vue.config.js，vue/config.js創建 - 可以通過插件進行擴展。
- 可升級；
一個豐富的官方插件集合，集成了前端生態中最好的工具。
一套完全圖形化的創建和管理
Vue.js項目的用戶界面。
Vue CLI 致力于將 Vue 生態中的工具基礎標準化。它確保了各種構建工具能夠基于智能的默認配置即可平穩銜接，這樣你可以專注在撰寫應用上，而不必花好幾天去糾結配置的問題。與此同時，它也為每個工具提供了調整配置的靈活性，無需 eject。
CLI
CLI (@vue/cli) 是一個全局安裝的 npm 包，提供了終端里的 vue 命令。它可以通過 vue create 快速創建一個新項目的腳手架，或者直接通過 vue serve 構建新想法的原型。
你也可以通過 vue ui 通過一套圖形化界面管理你的所有項目。vue ui 擁有一套強大的圖形分析功能可以提供項目優化選項
CLI 服務
CLI 服務 (@vue/cli-service) 是一個開發環境依賴。它是一個 npm 包，局部安裝在每個 @vue/cli 創建的項目中。
CLI 服務是構建于 webpack 和 webpack-dev-server 之上的。它包含了：
- 加載其它 CLI 插件的核心服務；
- 一個針對絕大部分應用優化過的內部的
webpack配置； - 項目內部的
vue-cli-service命令，提供serve、build和inspect命令。
npm run serve 會增加開發環境變量，符合原有的 webpack 開發運行服務策略，不會生成實體 dist 目錄文件、提供熱加載功能已優化開發效率。
npm run build 會增加生產環境變量
CLI 插件
CLI 插件是向你的 Vue 項目提供可選功能的 npm 包，例如 Babel/TypeScript 轉譯、ESLint 集成、單元測試和 end-to-end 測試等。
當你在項目內部運行 vue-cli-service 命令時，它會自動解析并加載 package.json 中列出的所有 CLI 插件。
創建一個項目
命令新建 vue 項目
vue create demo
使用圖形化界面
你也可以通過 vue ui 命令以圖形化界面創建和管理項目
瀏覽器兼容性
browserslist https://github.com/browserslist/browserslist
你會發現有 package.json 文件里的 browserslist 字段 (或一個單獨的 .browserslistrc 文件)，指定了項目的目標瀏覽器的范圍。這個值會被 @babel/preset-env 和 Autoprefixer 用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴。
Polyfill
一個默認的 Vue CLI 項目會使用 @vue/babel-preset-app ，它通過 @babel/preset-env 和 browserslist 配置來決定項目需要的 polyfill。
Babel https://babeljs.io/
生成的配置內容：
module.exports = {
presets: [
'@vue/app',
],
plugins: [
]
};
HTML 和靜態資源
public/index.html 文件是一個會被 html-webpack-plugin 處理的模板。在構建過程中，資源鏈接會被自動注入。另外，Vue CLI 也會自動注入 resource hint (preload/prefetch、manifest 和圖標鏈接 (當用到 PWA 插件時) 以及構建過程中處理的 JavaScript 和 CSS 文件的資源鏈接。
插值
因為 index 文件被用作模板，所以你可以使用 lodash template 語法插入內容：
- <%= VALUE %> 用來做不轉義插值；
- <%- VALUE %> 用來做 HTML 轉義插值；
- <% expression %> 用來描述 JavaScript 流程控制。
除了被 html-webpack-plugin 暴露的默認值 之外，所有客戶端環境變量也可以直接使用。
Preload
<link rel="preload"> 是一種 resource hint，用來指定頁面加載后很快會被用到的資源，所以在頁面加載的過程中，我們希望在瀏覽器開始主體渲染之前盡早 preload。
默認情況下，一個 Vue CLI 應用會為所有初始化渲染需要的文件自動生成 preload 提示。
這些提示會被 @vue/preload-webpack-plugin 注入，并且可以通過 chainWebpack 的 config.plugin('preload') 進行修改和刪除。
Prefetch
<link rel="prefetch"> 是一種 resource hint，用來告訴瀏覽器在頁面加載完成后，利用空閑時間提前獲取用戶未來可能會訪問的內容。
默認情況下，一個 Vue CLI 應用會為所有作為 async chunk 生成的 JavaScript 文件 (通過動態 import() 按需 code splitting 的產物) 自動生成 prefetch 提示。
這些提示會被 @vue/preload-webpack-plugin 注入，并且可以通過 chainWebpack 的 config.plugin('prefetch') 進行修改和刪除。
示例：
// vue.config.js
module.exports = {
chainWebpack: config => {
// 移除 prefetch 插件
config.plugins.delete('prefetch')
// 或者
// 修改它的選項：
config.plugin('prefetch').tap(options => {
options[0].fileBlacklist = options[0].fileBlacklist || []
options[0].fileBlacklist.push(/myasyncRoute(.)+?\.js$/)
return options
})
}
}
當 prefetch 插件被禁用時，你可以通過 webpack 的內聯注釋手動選定要提前獲取的代碼區塊：
import(/* webpackPrefetch: true */ './someAsyncComponent.vue')
webpack 的運行時會在父級區塊被加載之后注入 prefetch 鏈接。
提示
Prefetch 鏈接將會消耗帶寬。如果你的應用很大且有很多 async chunk，而用戶主要使用的是對帶寬較敏感的移動端，那么你可能需要關掉 prefetch 鏈接并手動選擇要提前獲取的代碼區塊。
Vue template - lodash https://lodash.com/docs/4.17.10#template
構建一個多頁應用
不是每個應用都需要是一個單頁應用。Vue CLI 支持使用 vue.config.js 中的 pages 選項構建一個多頁面的應用。構建好的應用將會在不同的入口之間高效共享通用的 chunk 以獲得最佳的加載性能。
靜態資源可以通過兩種方式進行處理：
在 JavaScript 被導入或在
template/CSS中通過相對路徑被引用。這類引用會被webpack處理。放置在
public目錄下或通過絕對路徑被引用。這類資源將會直接被拷貝，而不會經過webpack的處理。
環境變量和模式
你可以替換你的項目根目錄中的下列文件來指定環境變量：
.env # 在所有的環境中被載入
.env.local # 在所有的環境中被載入，但會被 git 忽略
.env.[mode] # 只在指定的模式中被載入
.env.[mode].local # 只在指定的模式中被載入，但會被 git 忽略
一個環境文件只包含環境變量的“鍵=值”對：
FOO=bar
VUE_APP_SECRET=secret
被載入的變量將會對 vue-cli-service 的所有命令、插件和依賴可用。
模式是 Vue CLI 項目中一個重要的概念。默認情況下，一個 Vue CLI 項目有三個模式：
- development 模式用于 vue-cli-service serve
- production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
- test 模式用于 vue-cli-service test:unit
只有以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態嵌入到客戶端側的包中。你可以在應用的代碼中這樣訪問它們：
console.log(process.env.VUE_APP_SECRET)
除了 VUE_APP_* 變量之外，在你的應用代碼中始終可用的還有兩個特殊的變量：
- NODE_ENV - 會是 "development"、"production" 或 "test" 中的一個。具體的值取決于應用運行的模式。
- BASE_URL - 會和
vue.config.js中的baseUrl選項相符，即你的應用會部署到的基礎路徑。
所有解析出來的環境變量都可以在 public/index.html 中以 HTML 插值中介紹的方式使用。
提示
你可以在 vue.config.js 文件中計算環境變量。它們仍然需要以 VUE_APP_ 前綴開頭。這可以用于版本信息 process.env.VUE_APP_VERSION = require('./package.json').version。
