脚本宝典收集整理的这篇文章主要介绍了

[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 个参数:

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)

总结

以上是脚本宝典为你收集整理的

[Vue CLI 3] 插件开发之 registerCommand 到底做了什么

全部内容,希望文章能够帮你解决

[Vue CLI 3] 插件开发之 registerCommand 到底做了什么

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过