Vue CLI 插件和 Preset

插件

Vue CLI 使用了一套基于插件的架構。如果你查閱一個新創(chuàng)建項目的 package.json，就會發(fā)現(xiàn)依賴都是以 @vue/cli-plugin- 開頭的。插件可以修改 webpack 的內部配置，也可以向 vue-cli-service 注入命令。在項目創(chuàng)建的過程中，絕大部分列出的特性都是通過插件來實現(xiàn)的。

基于插件的架構使得 Vue CLI 靈活且可擴展。如果你對開發(fā)一個插件感興趣，請翻閱插件開發(fā)指南。

提示

你可以通過 vue ui 命令使用 GUI 安裝和管理插件。

在現(xiàn)有的項目中安裝插件

每個 CLI 插件都會包含一個 (用來創(chuàng)建文件的) 生成器和一個 (用來調整 webpack 核心配置和注入命令的) 運行時插件。當你使用 vue create 來創(chuàng)建一個新項目的時候，有些插件會根據(jù)你選擇的特性被預安裝好。如果你想在一個已經被創(chuàng)建好的項目中安裝一個插件，可以使用 vue add 命令：

vue add eslint

提示

vue add 的設計意圖是為了安裝和調用 Vue CLI 插件。這不意味著替換掉普通的 npm 包。對于這些普通的 npm 包，你仍然需要選用包管理器。

警告

我們推薦在運行 vue add 之前將項目的最新狀態(tài)提交，因為該命令可能調用插件的文件生成器并很有可能更改你現(xiàn)有的文件。

這個命令將 @vue/eslint 解析為完整的包名 @vue/cli-plugin-eslint，然后從 npm 安裝它，調用它的生成器。

# 這個和之前的用法等價
vue add cli-plugin-eslint

如果不帶 @vue 前綴，該命令會換作解析一個 unscoped 的包。例如以下命令會安裝第三方插件 vue-cli-plugin-apollo：

# 安裝并調用 vue-cli-plugin-apollo
vue add apollo

你也可以基于一個指定的 scope 使用第三方插件。例如如果一個插件名為 @foo/vue-cli-plugin-bar，你可以這樣添加它：

vue add @foo/bar

你可以向被安裝的插件傳遞生成器選項 (這樣做會跳過命令提示)：

vue add eslint --config airbnb --lintOn save

如果一個插件已經被安裝，你可以使用 vue invoke 命令跳過安裝過程，只調用它的生成器。這個命令會接受和 vue add 相同的參數(shù)。

提示

如果出于一些原因你的插件列在了該項目之外的其它 package.json 文件里，你可以在自己項目的 package.json 里設置 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ù)。關于插件 API 的更多信息可以查閱插件開發(fā)指南。

你也可以通過 vuePlugins.ui 選項添加像 UI 插件一樣工作的文件：

{
  "vuePlugins": {
    "ui": ["my-ui.js"]
  }
}

更多信息請閱讀 UI 插件 API。

Preset

一個 Vue CLI preset 是一個包含創(chuàng)建新項目所需預定義選項和插件的 JSON 對象，讓用戶無需在命令提示中選擇它們。

在 vue create 過程中保存的 preset 會被放在你的 home 目錄下的一個配置文件中 (~/.vuerc)。你可以通過直接編輯這個文件來調整、添加、刪除保存好的 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ù)會被插件生成器用來生成相應的項目文件。除了上述這些字段，你也可以為集成工具添加配置：

{
  "useConfigFiles": true,
  "plugins": {...},
  "configs": {
    "vue": {...},
    "postcss": {...},
    "eslintConfig": {...},
    "jest": {...}
  }
}

這些額外的配置將會根據(jù) useConfigFiles 的值被合并到 package.json 或相應的配置文件中。例如，當 "useConfigFiles": true 的時候，configs 的值將會被合并到 vue.config.js 中。

Preset 插件的版本管理

你可以顯式地指定用到的插件的版本：

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "version": "^3.0.0",
      // ... 該插件的其它選項
    }
  }
}

注意對于官方插件來說這不是必須的——當被忽略時，CLI 會自動使用 registry 中最新的版本。不過我們推薦為 preset 列出的所有第三方插件提供顯式的版本范圍。

允許插件的命令提示

每個插件在項目創(chuàng)建的過程中都可以注入它自己的命令提示，不過當你使用了一個 preset，這些命令提示就會被跳過，因為 Vue CLI 假設所有的插件選項都已經在 preset 中聲明過了。

在有些情況下你可能希望 preset 只聲明需要的插件，同時讓用戶通過插件注入的命令提示來保留一些靈活性。

對于這種場景你可以在插件選項中指定 "prompts": true 來允許注入命令提示：

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      // 讓用戶選取他們自己的 ESLint config
      "prompts": true
    }
  }
}

遠程 Preset

你可以通過發(fā)布 git repo 將一個 preset 分享給其他開發(fā)者。這個 repo 應該包含以下文件：

• 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

當開發(fā)一個遠程 preset 的時候，你必須不厭其煩的向遠程 repo 發(fā)出 push 進行反復測試。為了簡化這個流程，你也可以直接在本地測試 preset。如果 --preset 選項的值是一個相對或絕對文件路徑，或是以 .json 結尾，則 Vue CLI 會加載本地的 preset：

# ./my-preset 應當是一個包含 preset.json 的文件夾
vue create --preset ./my-preset my-project

# 或者，直接使用當前工作目錄下的 json 文件：
vue create --preset my-preset.json my-project