1、介紹

Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)，提供：

• 通過(guò)?@vue/cli?實(shí)現(xiàn)的交互式的項(xiàng)目腳手架。

• 通過(guò)?@vue/cli?+?@vue/cli-service-global?實(shí)現(xiàn)的零配置原型開(kāi)發(fā)。

• 一個(gè)運(yùn)行時(shí)依賴 (@vue/cli-service)，該依賴：

  • 可升級(jí)；

  • 基于 webpack 構(gòu)建，并帶有合理的默認(rèn)配置；

  • 可以通過(guò)項(xiàng)目?jī)?nèi)的配置文件進(jìn)行配置；

  • 可以通過(guò)插件進(jìn)行擴(kuò)展。

• 一個(gè)豐富的官方插件集合，集成了前端生態(tài)中最好的工具。

• 一套完全圖形化的創(chuàng)建和管理 Vue.js 項(xiàng)目的用戶界面。

Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接，這樣你可以專注在撰寫(xiě)應(yīng)用上，而不必花好幾天去糾結(jié)配置的問(wèn)題。與此同時(shí)，它也為每個(gè)工具提供了調(diào)整配置的靈活性，無(wú)需 eject。

---

2、CLI 該系統(tǒng)中的組件

Vue CLI 有幾個(gè)獨(dú)立的部分，你會(huì)發(fā)現(xiàn)這個(gè)倉(cāng)庫(kù)里同時(shí)管理了多個(gè)單獨(dú)發(fā)布的包。

---

2.1 CLI

CLI (@vue/cli) 是一個(gè)全局安裝的 npm 包，提供了終端里的?vue?命令。它可以通過(guò)?vue create?快速搭建一個(gè)新項(xiàng)目，或者直接通過(guò)?vue serve?構(gòu)建新想法的原型。你也可以通過(guò)?vue ui?通過(guò)一套圖形化界面管理你的所有項(xiàng)目。

2.2 CLI 服務(wù)

CLI 服務(wù) (@vue/cli-service) 是一個(gè)開(kāi)發(fā)環(huán)境依賴。它是一個(gè) npm 包，局部安裝在每個(gè)?@vue/cli?創(chuàng)建的項(xiàng)目中。

CLI 服務(wù)是構(gòu)建于?webpack?和?webpack-dev-server?之上的。它包含了：

• 加載其它 CLI 插件的核心服務(wù)；
• 一個(gè)針對(duì)絕大部分應(yīng)用優(yōu)化過(guò)的內(nèi)部的 webpack 配置；
• 項(xiàng)目?jī)?nèi)部的?vue-cli-service?命令，提供?serve、build?和?inspect?命令。

如果你熟悉?create-react-app?的話，@vue/cli-service?實(shí)際上大致等價(jià)于?react-scripts，盡管功能集合不一樣。

2.3 CLI 插件

CLI 插件是向你的 Vue 項(xiàng)目提供可選功能的 npm 包，例如 Babel/TypeScript 轉(zhuǎn)譯、ESLint 集成、單元測(cè)試和 end-to-end 測(cè)試等。Vue CLI 插件的名字以?@vue/cli-plugin-?(內(nèi)建插件) 或?vue-cli-plugin-?(社區(qū)插件) 開(kāi)頭，非常容易使用。

當(dāng)你在項(xiàng)目?jī)?nèi)部運(yùn)行?vue-cli-service?命令時(shí)，它會(huì)自動(dòng)解析并加載?package.json?中列出的所有 CLI 插件。

插件可以作為項(xiàng)目創(chuàng)建過(guò)程的一部分，或在后期加入到項(xiàng)目中。它們也可以被歸成一組可復(fù)用的 preset。

---

3、CLI使用的命令

在一個(gè) Vue CLI 項(xiàng)目中，@vue/cli-service?安裝了一個(gè)名為?vue-cli-service?的命令。

你可以在 npm scripts 中以?vue-cli-service、或者從終端中以?./node_modules/.bin/vue-cli-service?訪問(wèn)這個(gè)命令。

這是你使用默認(rèn) preset 的項(xiàng)目的?package.json：

{"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"}
}

你可以通過(guò) npm 或 Yarn 調(diào)用這些 script：

npm run serve
# OR
yarn serve

如果你可以使用?npx?(最新版的 npm 應(yīng)該已經(jīng)自帶)，也可以直接這樣調(diào)用命令：

npx vue-cli-service serve

提示

你可以通過(guò)?vue ui?命令使用 GUI 運(yùn)行更多的特性腳本。

這里有一個(gè) GUI 的 webpack Analyzer：

3.1 vue-cli-service serve

用法：vue-cli-service serve [options] [entry]選項(xiàng)：--open    在服務(wù)器啟動(dòng)時(shí)打開(kāi)瀏覽器--copy    在服務(wù)器啟動(dòng)時(shí)將 URL 復(fù)制到剪切版--mode    指定環(huán)境模式 (默認(rèn)值：development)--host    指定 host (默認(rèn)值：0.0.0.0)--port    指定 port (默認(rèn)值：8080)--https   使用 https (默認(rèn)值：false)

vue-cli-service serve?命令會(huì)啟動(dòng)一個(gè)開(kāi)發(fā)服務(wù)器 (基于?webpack-dev-server) 并附帶開(kāi)箱即用的模塊熱重載 (Hot-Module-Replacement)。

除了通過(guò)命令行參數(shù)，你也可以使用?vue.config.js?里的?devServer?字段配置開(kāi)發(fā)服務(wù)器。

命令行參數(shù)?[entry]?將被指定為唯一入口 (默認(rèn)值：src/main.js，TypeScript 項(xiàng)目則為?src/main.ts)，而非額外的追加入口。嘗試使用?[entry]?覆蓋?config.pages?中的?entry?將可能引發(fā)錯(cuò)誤。

3.2 vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]選項(xiàng)：--mode        指定環(huán)境模式 (默認(rèn)值：production)--dest        指定輸出目錄 (默認(rèn)值：dist)--modern      面向現(xiàn)代瀏覽器帶自動(dòng)回退地構(gòu)建應(yīng)用--target      app | lib | wc | wc-async (默認(rèn)值：app)--name        庫(kù)或 Web Components 模式下的名字 (默認(rèn)值：package.json 中的 "name" 字段或入口文件名)--no-clean    在構(gòu)建項(xiàng)目之前不清除目標(biāo)目錄的內(nèi)容--report      生成 report.html 以幫助分析包內(nèi)容--report-json 生成 report.json 以幫助分析包內(nèi)容--watch       監(jiān)聽(tīng)文件變化

vue-cli-service build?會(huì)在?dist/?目錄產(chǎn)生一個(gè)可用于生產(chǎn)環(huán)境的包，帶有 JS/CSS/HTML 的壓縮，和為更好的緩存而做的自動(dòng)的 vendor chunk splitting。它的 chunk manifest 會(huì)內(nèi)聯(lián)在 HTML 里。

這里還有一些有用的命令參數(shù)：

• --modern?使用現(xiàn)代模式構(gòu)建應(yīng)用，為現(xiàn)代瀏覽器交付原生支持的 ES2015 代碼，并生成一個(gè)兼容老瀏覽器的包用來(lái)自動(dòng)回退。

• --target?允許你將項(xiàng)目中的任何組件以一個(gè)庫(kù)或 Web Components 組件的方式進(jìn)行構(gòu)建。更多細(xì)節(jié)請(qǐng)查閱構(gòu)建目標(biāo)。

• --report?和?--report-json?會(huì)根據(jù)構(gòu)建統(tǒng)計(jì)生成報(bào)告，它會(huì)幫助你分析包中包含的模塊們的大小。

3.3 vue-cli-service inspect

用法：vue-cli-service inspect [options] [...paths]選項(xiàng)：--mode    指定環(huán)境模式 (默認(rèn)值：development)

你可以使用?vue-cli-service inspect?來(lái)審查一個(gè) Vue CLI 項(xiàng)目的 webpack config。

3.4 查看所有的可用命令

有些 CLI 插件會(huì)向?vue-cli-service?注入額外的命令。例如?@vue/cli-plugin-eslint?會(huì)注入?vue-cli-service lint?命令。你可以運(yùn)行以下命令查看所有注入的命令：

npx vue-cli-service help

你也可以這樣學(xué)習(xí)每個(gè)命令可用的選項(xiàng)：

npx vue-cli-service help [command]

3.5 緩存和并行處理

• cache-loader?會(huì)默認(rèn)為 Vue/Babel/TypeScript 編譯開(kāi)啟。文件會(huì)緩存在?node_modules/.cache?中——如果你遇到了編譯方面的問(wèn)題，記得先刪掉緩存目錄之后再試試看。

• thread-loader?會(huì)在多核 CPU 的機(jī)器上為 Babel/TypeScript 轉(zhuǎn)譯開(kāi)啟。