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

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了