[Vue CLI 3] 插件开发之 registerCommand 到底做了什么
首先,我们看到在 package.json
中有 scripts
的定义:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
我们看到 serve 和 build 其实多是依托的 vue-cli-service
之前我们提到过了通过 api.registerCommand
来注册命令的:
比如在 cli-service/lib/commands/serve.js
module.exports = (api, options) => {
api.registerCommand('serve', {
// ...
}, async function serve (args) {
})
}
我们看一下 cli-service/lib/PluginAPI.js
文件:
class PluginAPI {
constructor (id, service) {
this.id = id
this.service = service
}
}
函数 registerCommand 会设置 service.commands
接受 3
个参数:
- name
- opts
- fn
registerCommand (name, opts, fn) {
if (typeof opts === 'function') {
fn = opts
opts = null
}
this.service.commands[name] = { fn, opts: opts || {}}
}
我们再看一下 cli-service/bin/vue-cli-service.js
service.run(command, args, rawArgv).catch(err => {
error(err)
process.exit(1)
})
cli-service/lib/Service.js
会调用 run
方法:
async run (name, args = {}, rawArgv = []) {
}
里面会从 commands
里面取:
let command = this.commands[name]
最终执行它里面的 fn
:
const { fn } = command
return fn(args, rawArgv)
来源:https://segmentfault.com/a/1190000016253182
[Vue CLI 3] 插件开发之 registerCommand 到底做了什么的更多相关文章
- [Vue CLI 3] 插件开发中的 genCacheConfig 细节研究
在 @vue/cli-plugin-babel/index.js 中: api.genCacheConfig('babel-loader', {}, []) 我们看一下 api.genCacheCon ...
- vue.js中,input和textarea上的v-model指令到底做了什么?
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...
- 从vue.js的源码分析,input和textarea上的v-model指令到底做了什么
v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能:对,它本质上只是一个语法糖,但到底是一个 ...
- vue cli 3
介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快 ...
- [Vue CLI 3] vue inspect 的源码设计实现
首先,请记住: 它在新版本的脚手架项目里面非常重要 它有什么用呢? inspect internal webpack config 能快速地在控制台看到对应生成的 webpack 配置对象. 首先它是 ...
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
- 如何使用@vue/cli 3.0在npm上创建,发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
随机推荐
- RN 环境搭建 运行demo App
1.环境搭建 1.1 JDK 1.2Android JDK 需要安装c++环境(我选择安装android studio) 1.3Node npm config set registry https: ...
- opencv4 java投影
工程下载 https://download.csdn.net/download/qq_16596909/11505994 比较适合与验证码的处理,毕竟八邻域降噪不能消除比较大的噪点,为了尽量减少噪点对 ...
- js 事件的自定义函数
转自:http://www.zhangxinxu.com/study/201203/js-custom-dom-events.html http://stylechen.com/trigger.htm ...
- HDFS FsImage文件
- 有趣的纯CSS实现动态晴阴雨雪
我们先来看看实现的效果吧 非常的美腻,对吧.这个是纯css,且单标签实现的哦~ 先贴完整代码,我们再来看看这个里面究竟有什么可以借鉴的知识点 <!DOCTYPE html> <htm ...
- fill memset, for小测试
/*很无聊写着玩玩,后来发现memset效率会比fill高出这么多,可惜一般只用来赋值0,-1......以后可以用fill来偷偷懒了...*/ #include<iostream> #i ...
- 关于 linux 的 limit 的设置
以下内容参考链接 1.file-max系统最大打开文件描述符数 永久性:在/etc/sysctl.conf中设置 2.nr_open是单个进程可分配的最大文件数. 内核支持的最大file handle ...
- mysql8.0 安装版没有my.ini
这时候,打开 benchmark,看一下实际路径就好了
- spring mvc 引入log4日记记录maven工程 slf4j和log4j输出到控制台配合使用log4j不输出到文件
https://blog.csdn.net/qq_27093465/article/details/62928590 使用slf4j的优点: 提供带参数的日志输出方法(SLF4J 1.7及以后版本). ...
- 基础篇-1.5Java的数组
1 引言 每一种编程语言都有其自身的数组概念,大同小异,都是为了存储一堆数据,而Java的数组是用来存储相同类型的数据,如声明一个arr[10]数组,可以用来代替声明10个变量. 2 声明和创建数组 ...