建站
咨詢
售后
建站咨詢
新聞中心
插件
Vue CLI 使用了一套基于插件的架構(gòu)。如果你查閱一個新創(chuàng)建項目的 package.json，就會發(fā)現(xiàn)依賴都是以 @vue/cli-plugin- 開頭的。插件可以修改 webpack 的內(nèi)部配置，也可以向 vue-cli-service 注入命令。在項目創(chuàng)建的過程中，絕大部分列出的特性都是通過插件來實現(xiàn)的。
創(chuàng)新互聯(lián)專注于尚志網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供尚志營銷型網(wǎng)站建設(shè)，尚志網(wǎng)站制作、尚志網(wǎng)頁設(shè)計、尚志網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)服務(wù)，打造尚志網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供尚志網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
基于插件的架構(gòu)使得 Vue CLI 靈活且可擴展。如果你對開發(fā)一個插件感興趣，請翻閱插件開發(fā)指南。
提示
你可以通過 vue ui 命令使用 GUI 安裝和管理插件。
在現(xiàn)有的項目中安裝插件
每個 CLI 插件都會包含一個 (用來創(chuàng)建文件的) 生成器和一個 (用來調(diào)整 webpack 核心配置和注入命令的) 運行時插件。當(dāng)你使用 vue create 來創(chuàng)建一個新項目的時候，有些插件會根據(jù)你選擇的特性被預(yù)安裝好。如果你想在一個已經(jīng)被創(chuàng)建好的項目中安裝一個插件，可以使用 vue add 命令：
vue add eslint
提示
vue add 的設(shè)計意圖是為了安裝和調(diào)用 Vue CLI 插件。這不意味著替換掉普通的 npm 包。對于這些普通的 npm 包，你仍然需要選用包管理器。
警告
我們推薦在運行 vue add 之前將項目的最新狀態(tài)提交，因為該命令可能調(diào)用插件的文件生成器并很有可能更改你現(xiàn)有的文件。
這個命令將 @vue/eslint 解析為完整的包名 @vue/cli-plugin-eslint，然后從 npm 安裝它，調(diào)用它的生成器。
# 這個和之前的用法等價
vue add cli-plugin-eslint
如果不帶 @vue 前綴，該命令會換作解析一個 unscoped 的包。例如以下命令會安裝第三方插件 vue-cli-plugin-apollo：
# 安裝并調(diào)用 vue-cli-plugin-apollo
vue add apollo
你也可以基于一個指定的 scope 使用第三方插件。例如如果一個插件名為 @foo/vue-cli-plugin-bar，你可以這樣添加它：
vue add @foo/bar
你可以向被安裝的插件傳遞生成器選項 (這樣做會跳過命令提示)：
vue add eslint --config airbnb --lintOn save
如果一個插件已經(jīng)被安裝，你可以使用 vue invoke 命令跳過安裝過程，只調(diào)用它的生成器。這個命令會接受和 vue add 相同的參數(shù)。
提示
如果出于一些原因你的插件列在了該項目之外的其它 package.json 文件里，你可以在自己項目的 package.json 里設(shè)置 vuePlugins.resolveFrom 選項指向包含其它 package.json 的文件夾。
例如，如果你有一個 .config/package.json 文件：
{
"vuePlugins": {
"resolveFrom": ".config"
}
}
項目本地的插件
如果你需要在項目里直接訪問插件 API 而不需要創(chuàng)建一個完整的插件，你可以在 package.json 文件中使用 vuePlugins.service 選項：
{
"vuePlugins": {
"service": ["my-commands.js"]
}
}
每個文件都需要暴露一個函數(shù)，接受插件 API 作為第一個參數(shù)。關(guān)于插件 API 的更多信息可以查閱插件開發(fā)指南。
你也可以通過 vuePlugins.ui 選項添加像 UI 插件一樣工作的文件：
{
"vuePlugins": {
"ui": ["my-ui.js"]
}
}
更多信息請閱讀 UI 插件 API。
Preset
一個 Vue CLI preset 是一個包含創(chuàng)建新項目所需預(yù)定義選項和插件的 JSON 對象，讓用戶無需在命令提示中選擇它們。
在 vue create 過程中保存的 preset 會被放在你的 home 目錄下的一個配置文件中 (~/.vuerc)。你可以通過直接編輯這個文件來調(diào)整、添加、刪除保存好的 preset。
這里有一個 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ù)會被插件生成器用來生成相應(yīng)的項目文件。除了上述這些字段，你也可以為集成工具添加配置：
{
"useConfigFiles": true,
"plugins": {...},
"configs": {
"vue": {...},
"postcss": {...},
"eslintConfig": {...},
"jest": {...}
}
}
這些額外的配置將會根據(jù) useConfigFiles 的值被合并到 package.json 或相應(yīng)的配置文件中。例如，當(dāng) "useConfigFiles": true 的時候，configs 的值將會被合并到 vue.config.js 中。
Preset 插件的版本管理
你可以顯式地指定用到的插件的版本：
{
"plugins": {
"@vue/cli-plugin-eslint": {
"version": "^3.0.0",
// ... 該插件的其它選項
}
}
}
注意對于官方插件來說這不是必須的——當(dāng)被忽略時，CLI 會自動使用 registry 中最新的版本。不過我們推薦為 preset 列出的所有第三方插件提供顯式的版本范圍。
允許插件的命令提示
每個插件在項目創(chuàng)建的過程中都可以注入它自己的命令提示，不過當(dāng)你使用了一個 preset，這些命令提示就會被跳過，因為 Vue CLI 假設(shè)所有的插件選項都已經(jīng)在 preset 中聲明過了。
在有些情況下你可能希望 preset 只聲明需要的插件，同時讓用戶通過插件注入的命令提示來保留一些靈活性。
對于這種場景你可以在插件選項中指定 "prompts": true 來允許注入命令提示：
{
"plugins": {
"@vue/cli-plugin-eslint": {
// 讓用戶選取他們自己的 ESLint config
"prompts": true
}
}
}
遠程 Preset
你可以通過發(fā)布 git repo 將一個 preset 分享給其他開發(fā)者。這個 repo 應(yīng)該包含以下文件：
- preset.json: 包含 preset 數(shù)據(jù)的主要文件（必需）。
- generator.js: 一個可以注入或是修改項目中文件的 Generator。
- prompts.js 一個可以通過命令行對話為 generator 收集選項的 prompts 文件。
發(fā)布 repo 后，你就可以在創(chuàng)建項目的時候通過 --preset 選項使用這個遠程的 preset 了：
# 從 GitHub repo 使用 preset
vue create --preset username/repo my-project
GitLab 和 BitBucket 也是支持的。如果要從私有 repo 獲取，請確保使用 --clone 選項：
vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project
加載文件系統(tǒng)中的 Preset
當(dāng)開發(fā)一個遠程 preset 的時候，你必須不厭其煩的向遠程 repo 發(fā)出 push 進行反復(fù)測試。為了簡化這個流程，你也可以直接在本地測試 preset。如果 --preset 選項的值是一個相對或絕對文件路徑，或是以 .json 結(jié)尾，則 Vue CLI 會加載本地的 preset：
# ./my-preset 應(yīng)當(dāng)是一個包含 preset.json 的文件夾
vue create --preset ./my-preset my-project
# 或者，直接使用當(dāng)前工作目錄下的 json 文件：
vue create --preset my-preset.json my-project分享題目：創(chuàng)新互聯(lián)VueCLI教程：VueCLI插件和Preset
標(biāo)題來源：http://www.dlmjj.cn/article/cccjgss.html
