Vue 插件和Preset
插件和Preset 插件 Vue CLI 使用了一套基于插件的架构 Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建项目的 package.json,就会发现依赖都是以 @vue/cli-plugin- 开头的。插件可以修改 webpack 的内部配置,也可以向 vue-cli-service 注入命令。在项目创建的过程中,绝大部分列出的特性都是通过插件来实现的。 基于plugin的架构是的Vue CLI 灵活且可扩展。 TIP 可以通过 vue ui 命令使用GUI install 和 manage plugin 在现有的项目中安装插件:vue add vue add @vue/eslint hint(提示) vue add 的设计意图是为了安装和调用Vue CLI插件 .这不意味着替换掉普通的npm包。 对于这些普通的npm包,你任然需要选用包管理器 warn(警告): 我们推荐在运行 vue add 之前将项目的最新状态提交,因为该命令可能调用插件的文件生成器 并且很有可能更改你现有的file 这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint,然后从 npm 安装它,调用它的生成器 #等价之前的用法 vue add @vue/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 add @vue/eslint --config airbnb --lintOn save vue-router 和 vuex 的情况比较特殊--他们并没有自己的插件。但是你任然可以这样添加他们 vue add router vue add vuex 如果一个插件插件语句被安装,你可以使用 vue invoke 命令跳过安装过程,只调用他的生产器。 这个命令会接收和vue add 相同的参数 hint 如果出于一些原因你的插件列在了该项目之外的其它 package.json 文件里,你可以在自己项目的 package.json 里设置 vuePlugins.resolveFrom 选项指向包含其它 package.json 的文件夹 Sample: 如果你有一个 .config/package.json file { "vuePlugins":{ "resolveFrom":".config" } } project local plugins 如果你需要在project里直接访问plugin API 而不需要create一个完整的plugin, 你可以在package.json 文件中使用:vuPlugins.service选项 { "vuePlugins":{ "service":["my-commands.js"] } } 每个文件都需要暴露一个函数,接受插件 API 作为第一个参数。关于插件 API 的更多信息可以查阅插件开发指南。 你也可以通过 vuePlugins.ui 选项添加像 UI 插件一样工作的文件: { "VuePlugins":{ "ui":{"my-ui.js"} } } Preset 一个Vue CLI preset 是一个包含create new project所需preset option 和 plugins 的JSON对象,让用户 无需再命令提示中选择他们。 在vue create 过程中save的preset 会被放在你的home folder下的一个配置文件中(~/.vuerc)你可以 通过直接edit这个file来调整、add、delete保持好的preset Sample : { "userConfigFiles":true, "router":true, "vuex":true, "cssPrepreocessor":"sass", "plugins":{ "@vue/cli-plugin-babel":{}, "@vue/cli-plugin-eslint":{ "config":"airbnb", "lintOn":["save","commit"] } } } Preset的数据会被插件生成器用来生产相应的project file. 除了上述这些字段,你也可以为集成工具添加配置: { "userConfigFiles":true, "plugins":{...}, "configs":{ "vue":{...}, "postcss":{...}, "eslintConfig":{...}, "jest":{} } } 这些额外的config将会根据 useConfigFiles的value被合并到 package.json 或相应的config file中 sample,当"useConfigFiles":true 的时候,config 的value 将会被合并到 vue.config.js中 Preset plugins 的Version manage 你可以显式地指定用到的plugin的version { "plugins":{ "@vue/cli-plugin-eslint":{ "version":"^3.0.0", //该plugin的其它options } } } 注意对于官方插件来说这不是必须的——当被忽略时,CLI 会自动使用 registry 中最新的版本。不过我们推荐为 preset 列出的所有第三方插件提供显式的版本范围。 允许插件的命令提示: 每个插件在项目创建的过程中都可以注入它自己的命令提示,不过当你使用了一个 preset,这些命令提示就会被跳过,因为 Vue CLI 假设所有的插件选项都已经在 preset 中声明过了。 在有些情况下你可能希望 preset 只声明需要的插件,同时让用户通过插件注入的命令提示来保留一些灵活性。 对于这种场景你可以在插件选项中指定 "prompts": true 来允许注入命令提示: { "plugins":{ "@vue/cli-plugin-eslint":{ //让用户选取他们自己的ESLint config "prompts":true } } } 远程Preset 你可以通过发布git repo 将一个preset 分享给其它开发者。这个 repo 应该包含一个包含了 preset 数据的 preset.json 文件。然后你就可以在创建项目的时候通过 --preset 选项使用这个远程的 preset 了: #从GitHub repo 使用preset vue create --preset username/repo my-project GitLab 和 BitBucket 也是支持的,如果要从私有repo获取请确保使用 --clone 选项: vue create --preset gitlab:username/repo --clone my-project vue create --preset bitbucket:username/repo --clone my-project 加载文件系统中的Preset 当开发一个远程Preset的时候,你必须不耐其烦的向远程repo 发出push 进行反复测试. 为了简化流程 --preset 标记也支持本地的 .json 文件: vue create --preset local.json my-project
插件和Preset
Vue 插件和Preset的更多相关文章
- vue插件编写与实战
关于 微信公众号:前端呼啦圈(Love-FED) 我的博客:劳卜的博客 知乎专栏:前端呼啦圈 前言 热爱vue开发的同学肯定知道awesome-vue 这个github地址,里面包含了数以千计的vue ...
- 第一个Vue插件从封装到发布
前言 这是我封装的第一个Vue插件,实现的功能是滑动选择省市区,虽然只是一个简单的插件,但还是挺开心的,记录一下步骤. 插件地址:https://github.com/leichangchun/vue ...
- 手把手教你写vue插件并发布(二)
前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html, 说到了一个完整的vue插件开发.发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果 ...
- VUE插件大总结
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...
- vue插件大全汇总
Vue是一个构建数据驱动的 web 界面的渐进式框架.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作 ...
- VUE插件总结
亲们支持我的新博客哦==>地址(以后更新会尽量在新博客更新,欢迎大家访问加入我的后宫w) ) UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和W ...
- Vue插件plugins的基本操作
前面的话 本文将详细介绍Vue插件plugins的基本操作 开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制——一般有下面几种: 1.添加全局方法或者属性,如: vue-custom- ...
- 把axios封装为vue插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- Vue插件写、用详解(附demo)
出处http://blog.csdn.net/qq20004604 Vue插件 1.概述 简单来说,插件就是指对Vue的功能的增强或补充. 比如说,让你在每个单页面的组件里,都可以调用某个方法,或者共 ...
随机推荐
- MySQL错误[ERR] 1064 - You have an error in your SQL syntax;
MySQL打开创建函数的开关, 查询创建函数开关是否打开: show variables like '%func%'; 打开创建函数开关: ; 关闭创建函数开关: ;
- 16.3 authguard 通过routing path控制显示URL 通过ngif显示和隐藏
显示或者隐藏component 通常情况下 我们的做法是把它做成class 以上两步完成,我们就可以用service了,再此之前,我们先 这样弄完以后 . 非登录状态键入上面地址会自动返回下面的地址 ...
- Hibernate学习笔记2.2(Hibernate基础Annotation配置)
如果数据库表名与类名不一致 可以用使用 @Table(name="_teacher") 来指定表名,没有就会自己创建 也可以在配置文件上修改 为class添加table属性 如果什 ...
- C++学习二继承
转载自https://www.cnblogs.com/33debug/p/6666939.html 1.继承与派生 继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一.简单的说,继承 ...
- Android Debug Bridge命令介绍[转]
Android Debug Bridge命令介绍 Android Debug Bridge的一些基本命令.这个工具直译过来就是Android调试桥的意思.它提供了强大的特性,例如复制文件到设备或从设备 ...
- LinQ to sql 各种数据库查询方法
1.多条件查询: 并且 && 或者 || var list = con.car.Where(r => r.code == "c014" || r.oil == ...
- 面向对象程序设计(Java)本学期课程改革说明
1.教学方式采用反转课堂教学法,学生课前完成知识的学习,课堂是师生之间.学生之间互动的场所,包括答疑解惑.知识的运用技巧探讨等,教师的课堂责任是理解学生的问题和引导学生去运用知识. 2.为更好地执行反 ...
- SO\PR\MO\排产回写的数据如下
QTYOPEN(WMENG).EDATU(promised_mat_availdate).... insert into OUT_ORDER_RES ' ; --PR 净需求 ' ; ---加上PR回 ...
- 我的一次rsync+inotify本地数据同步示例
环境: web工作目录:/var/www/mydafuhao git仓库目录: /var/www/mydafuhao.git/mydafuhao 需求:inotify监控git仓库目录,发现有版本更新 ...
- Java 读取Excel 文件内容
在一个项目中,有一个需求,是把excel文件的内容转换为xml格式展示.在学习如何操作的过程中,首先是如何获取excel文件,其中操作的代码如下: 1.首先是导入需要的 jar, 下载地址:https ...