Vue CLI 使用了一套基于插件的架構(gòu)。如果你查閱一個(gè)新創(chuàng)建項(xiàng)目的 package.json,就會(huì)發(fā)現(xiàn)依賴都是以 @vue/cli-plugin- 開頭的。插件可以修改 webpack 的內(nèi)部配置,也可以向 vue-cli-service 注入命令。在項(xiàng)目創(chuàng)建的過程中,絕大部分列出的特性都是通過插件來實(shí)現(xiàn)的。
基于插件的架構(gòu)使得 Vue CLI 靈活且可擴(kuò)展。如果你對(duì)開發(fā)一個(gè)插件感興趣,請(qǐng)翻閱插件開發(fā)指南。
提示
你可以通過 vue ui 命令使用 GUI 安裝和管理插件。
每個(gè) CLI 插件都會(huì)包含一個(gè) (用來創(chuàng)建文件的) 生成器和一個(gè) (用來調(diào)整 webpack 核心配置和注入命令的) 運(yùn)行時(shí)插件。當(dāng)你使用 vue create 來創(chuàng)建一個(gè)新項(xiàng)目的時(shí)候,有些插件會(huì)根據(jù)你選擇的特性被預(yù)安裝好。如果你想在一個(gè)已經(jīng)被創(chuàng)建好的項(xiàng)目中安裝一個(gè)插件,可以使用 vue add 命令:
vue add eslint
提示
vue add 的設(shè)計(jì)意圖是為了安裝和調(diào)用 Vue CLI 插件。這不意味著替換掉普通的 npm 包。對(duì)于這些普通的 npm 包,你仍然需要選用包管理器。
警告
我們推薦在運(yùn)行 vue add 之前將項(xiàng)目的最新狀態(tài)提交,因?yàn)樵撁羁赡苷{(diào)用插件的文件生成器并很有可能更改你現(xiàn)有的文件。
這個(gè)命令將 @vue/eslint 解析為完整的包名 @vue/cli-plugin-eslint,然后從 npm 安裝它,調(diào)用它的生成器。
# 這個(gè)和之前的用法等價(jià)
vue add cli-plugin-eslint
如果不帶 @vue 前綴,該命令會(huì)換作解析一個(gè) unscoped 的包。例如以下命令會(huì)安裝第三方插件 vue-cli-plugin-apollo:
# 安裝并調(diào)用 vue-cli-plugin-apollo
vue add apollo
你也可以基于一個(gè)指定的 scope 使用第三方插件。例如如果一個(gè)插件名為 @foo/vue-cli-plugin-bar,你可以這樣添加它:
vue add @foo/bar
你可以向被安裝的插件傳遞生成器選項(xiàng) (這樣做會(huì)跳過命令提示):
vue add eslint --config airbnb --lintOn save
如果一個(gè)插件已經(jīng)被安裝,你可以使用 vue invoke 命令跳過安裝過程,只調(diào)用它的生成器。這個(gè)命令會(huì)接受和 vue add 相同的參數(shù)。
提示
如果出于一些原因你的插件列在了該項(xiàng)目之外的其它 package.json 文件里,你可以在自己項(xiàng)目的 package.json 里設(shè)置 vuePlugins.resolveFrom 選項(xiàng)指向包含其它 package.json 的文件夾。
例如,如果你有一個(gè) .config/package.json 文件:
{
"vuePlugins": {
"resolveFrom": ".config"
}
}
如果你需要在項(xiàng)目里直接訪問插件 API 而不需要?jiǎng)?chuàng)建一個(gè)完整的插件,你可以在 package.json 文件中使用 vuePlugins.service 選項(xiàng):
{
"vuePlugins": {
"service": ["my-commands.js"]
}
}
每個(gè)文件都需要暴露一個(gè)函數(shù),接受插件 API 作為第一個(gè)參數(shù)。關(guān)于插件 API 的更多信息可以查閱插件開發(fā)指南。
你也可以通過 vuePlugins.ui 選項(xiàng)添加像 UI 插件一樣工作的文件:
{
"vuePlugins": {
"ui": ["my-ui.js"]
}
}
更多信息請(qǐng)閱讀 UI 插件 API。
一個(gè) Vue CLI preset 是一個(gè)包含創(chuàng)建新項(xiàng)目所需預(yù)定義選項(xiàng)和插件的 JSON 對(duì)象,讓用戶無需在命令提示中選擇它們。
在 vue create 過程中保存的 preset 會(huì)被放在你的 home 目錄下的一個(gè)配置文件中 (~/.vuerc)。你可以通過直接編輯這個(gè)文件來調(diào)整、添加、刪除保存好的 preset。
這里有一個(gè) preset 的示例:
{
"useConfigFiles": true,
"cssPreprocessor": "sass",
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"config": "airbnb",
"lintOn": ["save", "commit"]
},
"@vue/cli-plugin-router": {},
"@vue/cli-plugin-vuex": {}
}
}
Preset 的數(shù)據(jù)會(huì)被插件生成器用來生成相應(yīng)的項(xiàng)目文件。除了上述這些字段,你也可以為集成工具添加配置:
{
"useConfigFiles": true,
"plugins": {...},
"configs": {
"vue": {...},
"postcss": {...},
"eslintConfig": {...},
"jest": {...}
}
}
這些額外的配置將會(huì)根據(jù) useConfigFiles 的值被合并到 package.json 或相應(yīng)的配置文件中。例如,當(dāng) "useConfigFiles": true 的時(shí)候,configs 的值將會(huì)被合并到 vue.config.js 中。
你可以顯式地指定用到的插件的版本:
{
"plugins": {
"@vue/cli-plugin-eslint": {
"version": "^3.0.0",
// ... 該插件的其它選項(xiàng)
}
}
}
注意對(duì)于官方插件來說這不是必須的——當(dāng)被忽略時(shí),CLI 會(huì)自動(dòng)使用 registry 中最新的版本。不過我們推薦為 preset 列出的所有第三方插件提供顯式的版本范圍。
每個(gè)插件在項(xiàng)目創(chuàng)建的過程中都可以注入它自己的命令提示,不過當(dāng)你使用了一個(gè) preset,這些命令提示就會(huì)被跳過,因?yàn)?Vue CLI 假設(shè)所有的插件選項(xiàng)都已經(jīng)在 preset 中聲明過了。
在有些情況下你可能希望 preset 只聲明需要的插件,同時(shí)讓用戶通過插件注入的命令提示來保留一些靈活性。
對(duì)于這種場景你可以在插件選項(xiàng)中指定 "prompts": true 來允許注入命令提示:
{
"plugins": {
"@vue/cli-plugin-eslint": {
// 讓用戶選取他們自己的 ESLint config
"prompts": true
}
}
}
你可以通過發(fā)布 git repo 將一個(gè) preset 分享給其他開發(fā)者。這個(gè) repo 應(yīng)該包含以下文件:
發(fā)布 repo 后,你就可以在創(chuàng)建項(xiàng)目的時(shí)候通過 --preset 選項(xiàng)使用這個(gè)遠(yuǎn)程的 preset 了:
# 從 GitHub repo 使用 preset
vue create --preset username/repo my-project
GitLab 和 BitBucket 也是支持的。如果要從私有 repo 獲取,請(qǐng)確保使用 --clone 選項(xiàng):
vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project
當(dāng)開發(fā)一個(gè)遠(yuǎn)程 preset 的時(shí)候,你必須不厭其煩的向遠(yuǎn)程 repo 發(fā)出 push 進(jìn)行反復(fù)測(cè)試。為了簡化這個(gè)流程,你也可以直接在本地測(cè)試 preset。如果 --preset 選項(xiàng)的值是一個(gè)相對(duì)或絕對(duì)文件路徑,或是以 .json 結(jié)尾,則 Vue CLI 會(huì)加載本地的 preset:
# ./my-preset 應(yīng)當(dāng)是一個(gè)包含 preset.json 的文件夾
vue create --preset ./my-preset my-project
# 或者,直接使用當(dāng)前工作目錄下的 json 文件:
vue create --preset my-preset.json my-project
更多建議: