[Vue CLI 3] 插件编写实战和源码分析
当你看过了官方的几个插件之后,慢慢地,其实你也有需求了。
那如何编写一个 Vue CLI 3 的插件呢?
本文代码已经放到 github 上,地址:https://github.com/dailynodej...
我们建一个文件夹,取名 vue-cli-plugin-demo
,创建一个 index.js
module.exports = (api, projectOptions) => {//...
}
因为我们看遍了 cli-plugin-babel
、cli-plugin-eslint
等,我们发现他们的最外层结构
多是类似的:
多有一个 index.js
:
接受 2
个参数:
- api
- options
module.exports = (api, options) => {// ...
}
里面就是插件的核心部分,我们观察到它们两个也很类似,多用到了:
api.chainWebpack(webpackConfig => {// ...
})
但同时在 eslint 的源码中,我们看到了:
api.registerCommand('lint', {
}, args => {// ...
})
我们看项目根目录的 package.json
有一个命令
"scripts": {"lint": "vue-cli-service lint"
}
所以看起来:api.registerCommand
就是可以注册命令的。
大家还记得我们还有其他之前介绍过的命令吗:
"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"
}
我们看一下它们是不是也是这样注册的:
在 @vue/cli-service/lib/commands/build/
中
module.exports = (api, options) => {api.registerCommand('build', {}, async (args) => {})
}
在 cli-service/lib/commands/serve.js
中
module.exports = (api, options) => {api.registerCommand('serve', {}, async function serve (args) {})
}
那我们的 demo 也注册一个命令:
module.exports = (api, projectOptions) => {api.registerCommand('demo', {description: 'demo plugin for vue cli 3',usage: 'vue-cli-service demo',options: {}}, (args) => {let options = projectOptions.pluginOptions.demoOptionsconsole.log('options', options)})
}
这里要提到 vue.config.js
里面的一个配置项了 pluginOptions
它可以用来给第三方插件传递配置
所以我们正好可以通过它进行一些配置:
module.exports = {pluginOptions: {demoOptions: {c: 1,d: 2}}
}
然后在插件里面获取
的方式就是上面的代码中:
let options = projectOptions.pluginOptions.demoOptions
[Vue CLI 3] 插件编写实战和源码分析相关推荐
- 视频教程-经典Vue从入门到案例到源码分析教程(含资料)-Vue
经典Vue从入门到案例到源码分析教程(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国移动等知名企业 ...
- java校验框架源码解析_Spring Boot原理剖析和源码分析
Spring Boot原理剖析和源码分析 依赖管理 问题一:为什么导入dependency时不需要指定版本? spring-boot-starter-parent依赖 org.springframew ...
- SRS流媒体服务器——Forward集群搭建和源码分析
SRS流媒体服务器--Forward集群搭建和源码分析 目录 Forward集群原理 RTMP流转发(Forward)部署实例 Forward集群源码分析 1. Forward集群原理 Forward ...
- android lottie字体json,从json文件到炫酷动画-Lottie实现思路和源码分析
从json文件到炫酷动画-Lottie实现思路和源码分析,Lottie是最近Airbnb开源的动画项目,支持Android.iOS.ReactNaitve三个平台,本文分析主要Lottie把json文 ...
- Google Mock(Gmock)简单使用和源码分析——源码分析
源码分析 通过<Google Mock(Gmock)简单使用和源码分析--简单使用>中的例子,我们发现被mock的相关方法在mock类中已经被重新实现了,否则它们也不会按照我们的期待的行为 ...
- java.lang.ThreadLocal实现原理和源码分析
java.lang.ThreadLocal实现原理和源码分析 1.ThreadLocal的原理:为每一个线程维护变量的副本.某个线程修改的只是自己的副本. 2.ThreadLocal是如何做到把变量变 ...
- 【原创】【专栏】《Linux设备驱动程序》--- LDD3源码目录结构和源码分析经典链接
http://blog.csdn.net/geng823/article/details/37567557 [原创][专栏]<Linux设备驱动程序>--- LDD3源码目录结构和源码分析 ...
- Android RxJava(一) create操作符的用法和源码分析
RxJava(一) create操作符的用法和源码分析 转载于:https://www.cnblogs.com/zhujiabin/p/7291901.html
- 并发编程五:java并发线程池底层原理详解和源码分析
文章目录 java并发线程池底层原理详解和源码分析 线程和线程池性能对比 Executors创建的三种线程池分析 自定义线程池分析 线程池源码分析 继承关系 ThreadPoolExecutor源码分 ...
最新文章
- 《数字图像处理》 笔记
- 正则判断手机号是不是11位
- HDU2523 SORT AGAIN【计数排序】
- 安卓psp模拟器联机教程_安卓PSP模拟器评测:蜘蛛侠2
- Flutter之以阿里云图标库为例,使用多色图标
- Spring RCE 0day高危漏洞预警
- MySql查询某个时间段内的数据
- H5唤起web地图导航
- RabbitMQ中交换机的几种模式
- Mac 切换 键盘布局(Colemak、dvorak、qwerty)
- 【51单片机学习】PWM电机调速
- oracle配DISPLAY,ORACLE安装DISPLAY变量设置
- 中华英才网居然出现如此错误
- 创客学院知识巩固-03IO进程
- Windows操作命令(1)
- problem parm crash 照相机的问题
- Android Opengl es 写字 笔记
- 黑客攻陷拉斯维加斯,赌城燃起雄心焰火
- 电脑添加了无线之后要怎么连接服务器,电脑如何连接打印机,无线打印机怎么连接无线路由器...
- 国内外Android知名技术博客汇总