首页 > 其他分享 >『手撕Vue-CLI』添加自定义指令

『手撕Vue-CLI』添加自定义指令

时间:2024-04-28 14:34:22浏览次数:27  
标签:Vue CLI 自定义 create cli 添加 command 指令 description

前言

经上篇『手撕Vue-CLI』添加帮助和版本号的介绍之后,已经可以在控制台中输入 nue --help 来查看帮助信息了,但是在帮助信息中只有 --version--help 这两个指令,而 vue-cli 中还有很多指令,例如 createservebuild 等等,所以本章将继续添加自定义指令,例如 create 指令。

添加 create 指令

在 vue-cli 中,create 指令是用来创建一个新的项目的,我实现的 nue --help 的帮助信息中只有 --version--help 这两个指令,所以当用户使用我的 nue-cli 时,并不知道有 create 这个指令,所以接下来要完成的就是添加 create 指令到 nue-cli --help 的帮助信息中。

添加 create 指令到 --help 的帮助信息中

是否大家还记得在上一篇『手撕Vue-CLI』添加帮助和版本号中,我引入了 commander 这个库,这个库是用来处理命令行参数的,所以我们可以使用这个库来添加 create 指令到 nue-cli --help 的帮助信息中。

首先我们需要在 /bin/index.js 中引入 commander 这个库,这一步上一篇已经完成了,所以这里就不再赘述。

然后需要在 /bin/index.js 中添加 create 指令,这里我们可以使用 commandercommand 方法来添加指令,如下:

command 方法接收一个参数,第一个参数是指令的名称,调用方式是通过 commander 实例调用 command 方法,如下:

+ program
+   .command('create');

这样我们就添加了 create 指令:

这里只是单单的添加了 create 指令,但是并没有添加 create 指令的描述信息,告诉一下用户这个指令是干嘛干嘛用的之类的话术,所以我们需要添加 create 指令的描述信息,如下:

那么如何添加 create 指令的描述信息呢?紧接着上面的代码,在 command 方法后面添加 description 方法链式调用, description 方法的作用就是添加指令的描述信息,接收一个参数,就是指令的描述信息,如下:

 program
   .command('create')
+  .description('create a new project powered by nue-cli-service');

好了指令的描述设置好了,还可以设置下 alias 别名,就是可以通过简写的方式进行使用指令,继续链式调用 alias 方法,alias 方法的作用就是设置指令的别名,接收一个参数,就是指令的别名,如下:

 program
   .command('create')
+  .alias('c')
   .description('create a new project powered by nue-cli-service');

还可以设置 action 方法,继续链式调用 action 方法,action 方法的作用就是设置指令的回调函数,当用户输入了这个指令的时候,就会执行这个回调函数,如下:

 program
   .command('create')
   .alias('c')
   .description('create a new project powered by nue-cli-service')
+  .action(() => {
+    console.log('创建一个 Nue 项目');
+  });

这样我们就添加了 create 指令,并且添加了 create 指令的描述信息,别名,回调函数,现在如果用户使用 nue --help 就可以看到 create 指令了:

总结

其实就几点,介绍了一下 commandercommanddescriptionaliasaction 方法,这几个方法是用来添加指令的,设置指令的描述信息,别名,回调函数的,这样就可以添加自定义指令了。

有个注意点大家需要注意一下,就是 program.version(version).parse(process.argv); 这行代码要放在所有指令的后面,不然指令就不会生效了。

指令添加完成了,但是呢有一个问题,因为我本人是比较熟悉 vue-cli 所以知道有 create 并且知道怎么用,那么如果是一个新手呢?如果他知道了有 create 但是不知道怎么用呢?所以还需要添加 create 指令的使用示例。

添加 create 指令的使用示例

这个我相信对于新手又或者说有经验的人来说使用示例是啥就不用多说了,就是告诉用户怎么用这个指令。

那么如何添加 create 指令的使用示例呢?紧接着上面的代码,其实在 commander 中也有对应的解决方案,就是通过 commander.on 进行监听,监听 --help 事件,然后在监听事件中添加 create 指令的使用示例,如下:

+ program.on('--help', () => {
+   console.log('');
+   console.log('Examples:');
+   console.log('  nue create <app-name>  ');
+ });

封装公共解决方案

为啥我还要起一个标题来说这个呢?我现在只有一个 create 自定义指令,那么在后面还会有很多自定义指令,那么每次都要写一遍 commanddescriptionaliasactionon 这些方法,那么这样就会显得很冗余,所以可以封装一个公共解决方案,这样就可以减少代码量,提高代码的可维护性。

首先定义一个 commandMap 对象,用来存放指令的信息,可以将后续需要使用的指令都放里面进行存放起来,如下:

+ const commandMap = {
+   create: {
+     alias: 'c',
+     description: 'create a new project powered by vue-cli-service',
+     example: 'nue-cli create <app-name>',
+   },
+   add: {
+     alias: 'a',
+     description: 'install a plugin and invoke its generator in an already created project',
+     example: 'nue-cli add [options] <plugin> [pluginOptions]',
+   },
+   '*': {
+     alias: '',
+     description: 'command not found',
+     example: '',
+   },
+ };

我这里定义了 createadd* 三个指令,* 是用来处理用户输入的指令不存在的情况,这里只是定义了三个指令,后续还可以继续添加。

commandMap 对象的取值就是指令的名称,然后值是一个对象,这个对象包含了指令的别名,描述信息,使用示例,字段,后续的改进就是遍历 commandMap 对象,循环的添加指令,如下:

- program
-   .command('create')
-   .alias('c')
-   .description('create a new project powered by nue-cli-service')
-   .action(() => {
-     console.log('创建一个 Nue 项目');
-   });
+ Reflect.ownKeys(commandMap).forEach((key) => {
+   const value = commandMap[key];
+   program
+     .command(key)
+     .alias(value.alias)
+     .description(value.description)
+     .action(() => {
+       if (key === '*') {
+         console.log(value.description);
+       } else {
+         console.log(value.description);
+       }
+     });
+ });

通过 Reflect.ownKeys 方法遍历 commandMap 对象,然后通过 program.command 方法添加指令,Reflect.ownKeys 这个是 ES6 提供的一个方法,用来获取对象自身的属性键,返回一个数组,这个方法是用来替代 Object.keys 方法的,Object.keys 方法只能获取对象自身的可枚举属性键,而 Reflect.ownKeys 方法可以获取对象自身的所有属性键,包括不可枚举属性键。

什么意思呢?就是说 Reflect.ownKeys 方法可以获取对象自身的所有属性键,包括不可枚举属性键,而 Object.keys 方法只能获取对象自身的可枚举属性键,所以 Reflect.ownKeys 方法更加强大。

不可枚举又是什么意思呢?通俗易通的说就是 private 与 public 的区别,private 是不可枚举的,public 是可枚举的。

标签:Vue,CLI,自定义,create,cli,添加,command,指令,description
From: https://www.cnblogs.com/BNTang/p/18163682

相关文章

  • Vue系列---【如何关闭eslint校验?】
    如何关闭eslint校验?1.如果你的项目集成了eslint,但校验太严格,导致项目启动不了,你没时间排错,你可以找到vue.config.js,没有就创建,配上下面的内容。module.exports={//关闭eslint,因为校验太严格,例如:在main.js里定义了一个变量leta=100;,但未使用,就会导致项目启动不了......
  • 响应式原理(Vue3、Vue2)
    1.Vue3副作用函数(onMounted、watchEffect)帮助管理组件中的副作用逻辑,并自动追踪其依赖关系,以确保在数据变化时能够自动触发副作用函数的更新。会自动追踪被其内部函数引用的响应式数据。当这些数据发生变化时,Vue3会自动重新运行副作用函数,确保副作用与数据的状态保持同步。......
  • ant design pro vue项目搭建-运行项目
    1、克隆代码gitclone--depth=1https://github.com/vueComponent/ant-design-vue-pro.git2、依赖安装npminstall提示eslint版本报错  去除eslint,将package.json中eslint相关配置删除3、重新安装依赖完成,没有报错 npminstall 4、启动项目 npmrun......
  • eclipse 题解
    Statement给定一个圆,圆按照顺时针排布着\(2n\)个点,依次编号为\(1\simn\),其中编号为\(1\simn\)的点属于Alice,编号为\((n+1)\sim2n\)的点属于Bob。同时给出两个长度为\(n\)的序列\(A,B\)。你需要确定一个最大的正整数\(K\),使得存在\(K\)个二元组\((x_i,y_i)\)......
  • 前端学习之vue简介
    vue的简单介绍#Vue诞生背景从历史的潮流来说,人们从之前的:原生JS->Jquery之类的类库->前端模板引擎,他们都有一个共同的特点需要我们去操作dom元素。近几年来,得益于手机设备的普及和性能的提升,移动端的web需求大量增加,产生了一种叫webapp的东西,也就是移动端的网页应用......
  • vue了解与初步接触/使用
    Vue使用1、vue的启动1、Vue的操作命令启动.Vue去你对应的包里直接yarnserve2、首先先需要检测自己是否安装了yarn命令yarn命令和npm的区别1、yarn是从国内下载npm是从国外下载所以yarn速度效率比较高,npm速度效率比较低2、yarn-v--可以检测到是否有yarn命......
  • vue和react有什么区别?
    (1)核心思想不同 vue:灵活易用的渐进式框架,进行数据拦截/代理,它对侦测数据的变化更敏感、更精确 react:React推崇函数式编程(纯组件),数据不可变以及单向数据流,当然需要双向的地方也可以手动实现,比如借助onChange和setState来实现(2)组件写法差异 vue:Vue推荐的做法是template......
  • VUE知识体系、VUE面试题
    1.computed(计算属性)和方法有什么区别?计算属性本质上是包含getter和setter的方法当获取计算属性时,实际上是在调用计算属性的getter方法。vue会收集计算属性的依赖,并缓存计算属性的返回结果。只有当依赖变化后才会重新进行计算。方法没有缓存,每次调用方法都会导致重新执......
  • CAD二次开发 自定义纸张
    在实际CAD二次开发种遇到了需要自定义纸张的问题,CAD本身没有自定义纸张的api,需要对pmp文件做一些操作,再次,致敬惊惊大佬的博客,才让我这方面的开发工作量减少了很多,靠我自己也一时半会解决不了,因为我是用CAD2020版本来做这个的我对惊佬的两个重要的类做了一部分更改。publicclass......
  • 名表维修保养:uniapp 微信小程序自定义导航栏 详细步骤
    组件使用:  <navbarclass="header":background="backgroundColor"backtitle="标题"@onBack="goBack"></navbar>组件引用:  importnavbarfrom'@/components/NavBer.vue';组件注册:  components:{navbar......