背景
基于vue组件就近管理(图片等都放一个文件夹)的原则,封装一个有一定功能的组件都是在components目录下新建类似components/test/test.vue的层级,然后在router、或者views目录的组件中引入使用。这个过程会经历一下几步:
- 在components创建test文件夹
- 通过copy或者编辑器模板快速新建一个包含template/script/style的.vue文件,保存在test文件夹下
- 按官方推荐的写法在router、views中引入使用
在过去一年中我都是重复以上步骤,即使是通过编辑器快速新建好模板也是很痛苦,最近在掘金看了一遍文章也提到了以上问题,手把手教你使用nodejs编写cli(命令行),这篇文章教大家怎么实现一个cli但没有实现解决以上问题的cli,于是我结合自己的实际需要实现了一个~~~
这篇文章只演示一下 cli 实现的功能,不粘贴关于 cli 实现的任何代码,因为代码总量100行不到,除了颜色用了第三方 chalk 库,其它都是基于node.js自带的api实现,代码在 github。
项目中components、views、router/index.js 文件夹或文件基本项目开始的时候就已经存在了,所以cli代码里并没有做相关的判断,在components、views文件夹创建文件的时候必须确保这两个文件夹已经存在,下面正式开始。
1.安装
npm install l-cli -g
2.查看使用帮助
l-cli -help
3. 查看版本
l-cli -version
4.创建 .vue 文件实例
在 components 下创建 test.vue,-c代表在components 目录创建,-v同理
l-cli -c test
在动图中可以看到,初始状态components下没有任何文件,命令执行后多了test文件夹,同时router中多了一个内容,你们看到稍微有个延时才显示是因为文件内容改变了sublime 提示是否要重新加载,实际创建写入动作很快完成,比重复开头提到的步骤快了nnnnnn倍。
5.同时创建多个 .vue 文件,多个文件名空格隔开,支持 test-one 这种命名规范
l-cli -c test-one test-two
可以看到引入使用已经变成 'import TestOne from '@/components/test-one/test-one' 这种 Vue 官方推荐的写法,避免了手动转换,实际上这也是很累赘繁琐的工作,通过一行命令完全解放~~
6. 执行命令不输入文件名会抛出错误哦~~~
l-cli -c