阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      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/eslintvue 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

      目录
      目录