vue add 在现有的项目中安装插件
功能
每个 CLI 插件都会包含
- 一个生成器 (用来创建文件的)
- 一个运行时插件 (用来调整 webpack 核心配置和注入命令的) 。
当你使用 vue create
来创建一个新项目的时候,有些插件会根据你选择的特性被预安装好。
如果你想在一个已经被创建好的项目中安装一个插件,可以使用 vue add
命令:
vue add eslint
vue插件的约定
@vue/cli-plugin-
开头的是vue插件
插件可以修改 webpack 的内部配置,也可以向 vue-cli-service 注入命令。
在项目创建的过程中,绝大部分列出的特性都是通过插件来实现的。
使用插件前的注意
vue插件与普通的 npm 包
vue add 的设计意图是为了安装和调用 Vue CLI 插件。
这不意味着替换掉普通的 npm 包。
对于这些普通的 npm 包,你仍然需要选用包管理器。
vue插件可能会修改你的现有文件
我们推荐在运行 vue add 之前将项目的最新状态提交,因为该命令可能调用插件的文件生成器并很有可能更改你现有的文件。
vue add 插件名解析
Vue add 语法 | 等价于 | 解析的npm包 |
---|---|---|
vue add @vue/eslint | vue add cli-plugin-eslint | @vue/cli-plugin-eslint |
vue add apollo | - | vue-cli-plugin-apollo |
vue add @foo/bar | - | @foo/vue-cli-plugin-bar |
你可以向被安装的插件传递生成器选项 (这样做会跳过命令提示):
vue add eslint --config airbnb --lintOn save
vue invoke 命令跳过安装过程,只调用它的生成器
如果一个插件已经被安装,你可以使用 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。