插件

本节目标：理解“插件”的核心思路，并能把它用于实际开发或面试表达。

==插件== Vue CLI ==使用了一套基于插件的架构。如果你查阅一个新创建项目的== package.json==，就会发现依赖都是以== @vue/cli-plugin- ==开头的。插件可以修改== webpack ==的内部配置，也可以向== vue-cli-service ==注入命令。在项目创建的过程中，绝大部分列出的特性都是通过插件来实现的。== ==基于插件的架构使得== Vue CLI ==灵活且可扩展。如果你对开发一个插件感兴趣，请翻阅====插件开发指南====。== 提示你可以通过 vue ui 命令使用 GUI 安装和管理插件。

==在现有的项目中安装插件== ==每个====vue-c==LI ==插件都会包含==:

==一个== (==用来创建文件的==) ==生成器==
==一个== (==用来调整== webpack ==核心配置和注入命令的==) ==运行时插件。==

==当你使用== vue create ==来创建一个新项目的时候，有些插件会根据你选择的特性被预安装好。如果你想在一个已经被创建好的项目中安装一个插件，可以使用== vue add ==命令：==

vue add eslint

提示 vue add 的设计意图是为了安装和调用 Vue CLI 插件。这不意味着替换掉普通的 npm 包。对于这些普通的 npm 包，你仍然需要选用包管理器。警告我们推荐在运行 vue add 之前将项目的最新状态提交，因为该命令可能调用插件的文件生成器并很有可能更改你现有的文件。

vue add eslint

==这个命令将== @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====（非====scope====包）或====@vue(scope====包====)==

==你可以向被安装的插件传递生成器选项== (==这样做会跳过命令提示==)==：==

vue add

eslint --config airbnb --lintOn save ==如果一个插件已经被安装，你可以使用== 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==。==

插件 ​

插件