插件和预设 #

插件 #

Vue CLI 使用基于插件的架构。如果你检查一个新创建项目的 package.json，你会发现以 @vue/cli-plugin- 开头的依赖项。插件可以修改内部 webpack 配置，并将命令注入到 vue-cli-service 中。项目创建过程中列出的大多数功能都是作为插件实现的。

基于插件的架构使 Vue CLI 灵活且可扩展。如果你有兴趣开发插件，请查看 插件开发指南。

在现有项目中安装插件 #

每个 CLI 插件都附带一个生成器（用于创建文件）和一个运行时插件（用于调整核心 webpack 配置并注入命令）。当你使用 vue create 创建一个新项目时，一些插件会根据你的功能选择预先安装。如果你想将插件安装到已经创建的项目中，可以使用 vue add 命令

vue add eslint

该命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint，从 npm 安装它，并调用它的生成器。

# these are equivalent to the previous usage
vue add cli-plugin-eslint

如果没有 @vue 前缀，该命令将解析为一个非作用域包。例如，要安装第三方插件 vue-cli-plugin-apollo

# installs and invokes vue-cli-plugin-apollo
vue add apollo

你也可以使用特定作用域下的第三方插件。例如，如果一个插件名为 @foo/vue-cli-plugin-bar，你可以使用以下命令添加它

vue add @foo/bar

你可以将生成器选项传递给已安装的插件（这将跳过提示）

vue add eslint --config airbnb --lintOn save

如果一个插件已经安装，你可以跳过安装，只使用 vue invoke 命令调用它的生成器。该命令接受与 vue add 相同的参数。

{
  "vuePlugins": {
    "resolveFrom": ".config"
  }
}

项目本地插件 #

如果你需要在项目中访问插件 API，并且不想为它创建一个完整的插件，你可以在你的 package.json 文件中使用 vuePlugins.service 选项

{
  "vuePlugins": {
    "service": ["my-commands.js"]
  }
}

每个文件都需要导出一个函数，该函数将插件 API 作为第一个参数。有关插件 API 的更多信息，请查看 插件开发指南。

你也可以添加一些文件，这些文件将像 UI 插件一样工作，可以使用 vuePlugins.ui 选项

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

有关更多信息，请阅读 UI 插件 API。

预设 #

Vue CLI 预设是一个 JSON 对象，其中包含用于创建新项目的预定义选项和插件，这样用户就不必通过提示来选择它们。

在 vue create 期间保存的预设存储在用户主目录中的配置文件（~/.vuerc）中。你可以直接编辑此文件来调整/添加/删除保存的预设。

以下是一个预设示例

{
  "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": {}
  }
}

预设数据由插件生成器用于生成相应的项目文件。除了上述字段之外，你还可以添加用于集成工具的额外配置

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

这些额外的配置将合并到 package.json 或相应的配置文件中，具体取决于 useConfigFiles 的值。例如，使用 "useConfigFiles": true，configs.vue 的值将合并到 vue.config.js 中。

预设插件版本控制 #

你可以显式指定正在使用的插件的版本

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "version": "^3.0.0",
      // ... other options for this plugin
    }
  }
}

注意，对于官方插件，这不是必需的 - 如果省略，CLI 将自动使用注册表中可用的最新版本。但是，建议为预设中列出的任何第三方插件提供显式版本范围。

允许插件提示 #

每个插件都可以在项目创建过程中注入自己的提示，但是当你使用预设时，这些提示会被跳过，因为 Vue CLI 假设所有插件选项都已在预设中声明。

在某些情况下，你可能希望预设只声明所需的插件，同时通过让用户浏览插件注入的提示来保留一些灵活性。

对于这种情况，你可以在插件的选项中指定 "prompts": true，以允许注入它的提示

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      // let the users pick their own ESLint config
      "prompts": true
    }
  }
}

远程预设 #

你可以通过将预设发布到 git 仓库中与其他开发人员共享。该仓库可以包含以下文件

• preset.json：包含预设数据的主文件（必需）。
• generator.js：一个 生成器，可以注入或修改项目中的文件。
• prompts.js：一个 提示文件，可以收集生成器的选项。

发布仓库后，你就可以使用 --preset 选项在创建项目时使用远程预设

# use preset from GitHub repo
vue create --preset username/repo my-project

GitLab 和 BitBucket 也受支持。如果从私有仓库获取，请确保使用 --clone 选项

vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

# self-hosted repos
vue create --preset gitlab:my-gitlab-server.com:group/projectname --clone my-project
vue create --preset direct:ssh://[email protected]/group/projectname.git --clone my-project

本地文件系统预设 #

在开发远程预设时，反复将预设推送到远程仓库进行测试可能会很繁琐。为了简化工作流程，您可以直接使用本地预设。如果--preset选项的值是相对或绝对文件路径，或者以.json结尾，Vue CLI将加载本地预设。

# ./my-preset should be a directory containing preset.json
vue create --preset ./my-preset my-project

# or directly use a json file in cwd:
vue create --preset my-preset.json my-project