不是大佬,也得知道,Vue的一些小操作(二)

315 阅读3分钟

方土,老板娘出差了,你今晚我家吃烧烤——老板

快两个月了,没啥动静。因为最近天气比较炎热,杭州明天的温度也要破40度了,所以我们老板娘最近热的有点烦躁,我们不敢在发什么不利于老板娘的言论,好在老板娘今天出差了。然鹅我本以为今天可以休息了,老板又问我,有没有什么办法,能够在老板娘回来之后,快速的重新开始,好避免发回来之后发现什么异常再被骂。经过一番研究,感觉只能,放大招了。

快速重新来过——定制脚手架

yeoman

很久之前,我就想着能不能每次吃完烧烤之后,快速的把老板的家恢复原样。当时,我听闻了一个叫做Yeoman的兄弟,听说它有这个能力。呐,这是它的文档 Yeoman文档。可以在吃完烧烤之后把房子给爆破了,立马复制一份一样的出来。可以自定义模板,还能控制输入指令。当时我都推荐给老板了,可老板跟我来了一句,这是他前女友的现男友,嘶~~一直以来我们也就没怎么管他。

其实,归根结底还是因为我们老板的兄弟Vue先生。Yeoman的可定制型太强了,可是要完完全全定制一份属于我们自己的前端工程框架,老板觉得有点吃力,当时就放弃了这个方案。但说实话我心里还是有点不舍的,毕竟相识就是缘分嘛。

时间运动到了2020年

为什么要说运动到了2020年,这里扯一下

好,再扯回来

vue cli

vue的官方脚手架,大家都不陌生了。3.X 版本时代,它就已经支持了自定义模板了

先上文档:vue cli插件开发

据文档所示,基于vue cli做一个二次开发,定义好模板,动态配置模板,再配合git repo共享,此方案按理可行,那就,实操看看。

为了更加贴合习惯,我们用了和vue cli一样的终端对话工具 inquirer。有了这个,我们就能像vue一样,让用户自主选择需要哪种模板,哪些插件。方土演示的其实就是利用了vue cli的preset的功能,简单了做了一个符合我们自己的开发习惯的定制脚手架。先简单的看一下效果~~

老板说:“好了好了,可以了,照着这样的套路,那我自己往里面添家具就行了。我再也不怕你们的老板娘了。有了generator,那我想干什么都行了。我可以自己定义好不同的选项,根据脚手架的ejs自己动态适配。要是改动的东西比较多了,那我就再写几套不同的模板就行了,比如移动端一套PC端一套,反正动态引入嘛。来来来,烤肉熟了~”

用法

一般我们都会把这个模板存放在gitlab或者gitlab上,那创建在终端输入创建命令vue create -p direct:xxx.git --clone <project-name>就可以了(xxx.git也可以是本地目录,便于在本机实际测试效果)。如果自定义的模板只,有些我们自己npm私服的依赖包的话需要知道一下自己的依赖包地址,命令就变成了vue create -r npm镜像源 -p direct:xxx.git --clone <project-name> 符合vue cli的相关操作。

不只是脚手架的模板,平时我们用到的一些小插件,也可以基于此封装,跟vue生态做一个深度结合,具体看小伙伴们的诉求了。

最后附上一个简单的小demo,修修改改几分钟就可以做出一个符合自己习惯的地址模板了。

只是一个空壳小demo,平时我的一些小工具和项目优化配置之类的,就先没放进去,相关说明都已注释标明。

git地址