插件和预设配置

插件

Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建项目的 package.json,就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改内部的 webpack 配置,也可以向 vue-cli-service 注入命令。在项目创建的过程中列出的特性,绝大部分都是通过插件来实现的。

基于插件的架构使得 Vue CLI 灵活且可扩展。如果你对开发插件感兴趣,请翻阅插件开发指南

提示

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

在现有的项目中安装插件

每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件。当你使用 vue create 来创建一个新项目的时候,有些插件会根据你选择的特性被预安装好。如果你想在一个已经被创建好的项目中安装一个插件,可以使用 vue add 命令:

vue add eslint

提示

vue add 的设计意图是为了安装和调用 Vue CLI 插件。对于普通的 npm 包而言,这不意味有一个替代(命令)。对于这些普通的 npm 包,你仍然需要(根据所选的 npm 包)使用包管理器。

警告

我们推荐在运行 vue add 之前将项目的最新状态提交,因为该命令将会调用插件的文件生成器并很有可能更改你现有的文件。

这个命令将 @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-routervuex 的情况比较特殊——它们并没有自己的插件,但是你仍然可以这样添加它们:

vue add router
vue add vuex

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

提示

如果出于一些原因你的插件列在了该项目之外的其它 package.json 文件里,你可以在自己项目的 package.json 里设置 vuePlugins.resolveFrom 选项指向包含其它 package.json 的文件夹。

例如,如果你有一个 .config/package.json 文件:

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

项目本地的插件

如果你需要在项目里直接访问插件 API 而不需要创建一个完整的插件,你可以在 package.json 文件中使用 vuePlugins.service 选项:

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

每个文件都需要暴露一个函数,接受插件 API 作为第一个参数。关于插件 API 的更多信息可以查阅插件开发指南

你也可以通过 vuePlugins.ui 选项添加像 UI 插件一样工作的文件:

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

更多信息请阅读 UI 插件 API

预设配置

Vue CLI 预设配置是一个包含创建新项目所需的预定义选项和插件的 JSON 对象,让用户无需在命令提示中选择它们。

vue create 过程中保存的预设配置会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的配置。

这里有一个预设配置的示例:

{
  "useConfigFiles": true,
  "router": true,
  "vuex": true,
  "cssPreprocessor": "sass",
  "plugins": {
    "@vue/cli-plugin-babel": {},
    "@vue/cli-plugin-eslint": {
      "config": "airbnb",
      "lintOn": ["save", "commit"]
    }
  }
}

预设配置的数据会被插件生成器用来生成相应的项目文件。除了上述这些字段,你也可以为集成工具添加配置:

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

这些额外的配置将会根据 useConfigFiles 的值被合并到 package.json 或相应的配置文件中。例如,当 "useConfigFiles": true 的时候,configs 的值将会被合并到 vue.config.js 中。

预设配置插件的版本管理

你可以显式地指定用到的插件的版本:

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      "version": "^3.0.0",
      // ... 该插件的其它选项
    }
  }
}

注意对于官方插件来说这不是必须的——当被忽略时,CLI 会自动使用 registry 中最新的版本。不过我们推荐为预设配置所列出的所有第三方插件,提供明确的版本范围

允许插件的命令提示

每个插件在项目创建的过程中都可以注入它自己的命令提示,不过当你使用了预设配置,这些命令提示就会被跳过,因为 Vue CLI 假设所有的插件选项都已经在预设配置中声明过了。

在有些情况下你可能希望预设配置只声明需要的插件,同时让用户通过插件注入的命令提示来保留一些灵活性。

对于这种场景你可以在插件选项中指定 "prompts": true 来允许注入命令提示:

{
  "plugins": {
    "@vue/cli-plugin-eslint": {
      // 让用户选取他们自己的 ESLint 配置
      "prompts": true
    }
  }
}

远程预设

你可以通过发布 git repo 将一个预设配置分享给其他开发者。这个 repo 应该包含以下文件:

  • preset.json: 包含预设配置数据的主要文件(必需)。
  • generator.js: 一个可以注入或是修改项目中文件的 Generator
  • prompts.js 一个可以为 generator 收集选项的 prompts 文件

发布 repo 后,你就可以在创建项目的时候通过 --preset 选项使用这个远程的预设配置了:

# 从 GitHub repo 使用预设配置
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
# 自托管的 repo
vue create --preset gitlab:my-gitlab-server.com:group/projectname --clone my-project
vue create --preset direct:ssh://git@my-gitlab-server.com/group/projectname.git --clone my-project

加载文件系统中的预设配置

当开发远程预设配置的时候,重复地将预设配置 push 到远程 repo 中进行测试,会显得冗烦。为了简化这个流程,你也可以直接在本地测试预设配置。如果 --preset 选项的值是一个相对或绝对文件路径,或是以 .json 结尾,则 Vue CLI 会加载本地的预设配置:

# ./my-preset 应当是一个包含 preset.json 的文件夹
vue create --preset ./my-preset my-project

# 或者,直接使用当前工作目录下的 json 文件:
vue create --preset my-preset.json my-project