Vue CLI 插件 Plugins

原创
09/27 22:41
阅读数 18

插件Plugins

VUE CLI 是使用是基于插件的体系结构的。

如果检查新创建的项目的 package.json ,我们将发现以 @vue/cli-plugin- 开头的依赖项。插件可以修改内部webpack配置并将命令注入vue cli 服务,同时在项目创建的过程中列出的大多数特性都是作为插件实现的。

基于插件的体系结构它使得VUE CLI 也更具有灵活性和可扩展性。

在现有项目中安装插件

每个CLI插件都附带有一个生成器(用于创建文件)和一个运行时插件(用于调整核心webpack配置并注入命令)。当我们用 vue create 创建新项目时,它将根据我们选择的功能为此预安装一些插件,如果要将插件安装到已创建的项目中,可以使用以下 vue add 命令进行安装:

vue add eslint 

该命令将调用插件的文件生成器,并可能对现有文件进行更改,因此我们在运行项目前可以提交它的当前状态 vue add

vue/eslint 命令解析为 完整的软件包名称:@vue/cli-plugi-eslint,从npm安装它,并调用其生成器。(如果没有@vue前缀,该命令则解析为无作用域的软件包)

vue add cli-plugin-eslint

针对已有项目使用 vue-cli-service 安装:

npm i -D @vue/cli-service

package.json 中的 vuePlugins 对象中的 service 字段中引入对应的js文件,用于注册 watch命令的文件,并自行命名然后放在根目录。

然后在终端输入 npm run watch ,看是否输出watch命令注册成功,判断是否完成。

最后,我们可以通过运行 npx vue-cli-service help 查看 vue-cli-service 下面的所有命令,看是否新增了之前执行的 watch命令。

链接:https://www.9xkd.com/

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部