通过shell脚本自动生成vue文件的示例分析

这篇文章将为大家详细讲解有关通过shell脚本自动生成vue文件的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

最近在写nuxt项目时候每次新建页面都要去新建然后引入各种需要的依赖很是麻烦,所以想写一个脚本自动生成文件省去手动新建

现写下实现方法给大家参考

Mac下可直接运行
Windows下需要安装Cygwin类软件且配置环境变量后运行

<强>使用方法

1,需要修改包。json的scrpts加一条创建或者自定义名字主要是为了我们在终端中输入指令后运行对应的脚本

包。json

2,在项目根目录新建一个模板文件夹放自己的模板文件

文件内容根据项目需要自行修改

模板

3,之后在构建文件夹下新建创造。sh脚本文件(代码在下面)

4,之后在终端中输入<代码> npm运行创建指令这个指令支持后面携带一个不必传参数作为文件名(<代码> npm运行创建xxxx> npm运行创建

效果

文件名不能重复如果重复不会覆盖原有文件只会输出错误

# !/usr/bin/env  sh 　　create  (), { 　　,if  [[, REPLY 美元;=~,^ [Yy],美元]] 　　,然后 　　PATH_DIR才能=啊?组件/NAME"美元; 　　其他的, 　　PATH_DIR才能=啊?页面/NAME"美元; 　　,fi 　　 　　,if [!大敌;-d “PATH_DIR"美元;,) 　　,然后 　　mkdir  PATH_DIR美元 　　,if  [[, PATH_DIR 美元;=~,“components",]] 　　,然后 　　CLASS_NAME才能=白榧? NAME"美元; 　　cp 才能;COMPONENT_PATH 美元;“PATH_DIR美元/index.vue" 　　其他的, 　　CLASS_NAME才能=耙趁? NAME"美元; 　　cp 才能;PAGE_PATH 美元;“PATH_DIR美元/index.vue" 　　,fi 　　,sed 我;““,“s/类名称/CLASS_NAME美元/?“美元PATH_DIR/index.vue" 　　,echo  -e “\ n生成完成,\ n…, \ n" 　　其他的, 　　,echo  -e “\ n已存在文件夹,\ n PATH_DIR"美元; 　　,fi 　　} 　　 　　set  - e 　　echo “开始生成代码……“ 　　COMPONENT_PATH=啊?模板/component.vue" 　　PAGE_PATH=啊?模板/page.vue" 　　if  [[, -n  1美元,]] 　　然后 　　NAME=1美元 　　,read  -p “请问代码,NAME 美元;作用;是否是组件,?,(y/n)“-n  1, - r 　　其他的 　　,echo “未发现名称,,请输入名称?“ 　　read 名称 　　,read  -p “请问代码,NAME 美元;作用;是否是组件,?,(y/n)“-n  1, - r 　　fi 　　以前,创建

模板组件参考

& lt; template> 　　,& lt; div 类=袄嗖澄?比; 　　,组件 　　,& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　export  default  { 　　,道具:{}, 　　,数据(){ 　　{},return  　　}, 　　,方法:{ 　　,init () {} 　　,} 　　} 　　& lt;/script> 　　 　　& lt; style  lang=皊css", scoped> 　　@import  & # 39; @/共同/scss/var.scss& # 39;; 　　@import  & # 39; @/共同/scss/mixin.scss& # 39;; 　　 　　. class的背后,{ 　　} 　　& lt;/style>

模板页面参考

& lt; template> 　　,& lt; div 类=袄嗖澄?比; 　　,页面 　　,& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　{},baseMixin  import 得到& # 39;@/共同/混合/指数# 39; 　　 　　export  default  { 　　,mixin: [baseMixin], 　　,数据(){ 　　{},return  　　}, 　　,async  asyncData ({, axios 美元;}),{}, 　　,头(){ 　　,return  { 　　标题:才能,& # 39;& # 39; 　　,} 　　}, 　　,安装(){ 　　,this.init () 　　}, 　　,方法:{ 　　,init () {} 　　,} 　　} 　　& lt;/script> 　　 　　& lt; style  lang=皊css", scoped> 　　@import  & # 39; @/共同/scss/var.scss& # 39;; 　　@import  & # 39; @/共同/scss/mixin.scss& # 39;; 　　 　　. class的背后,{ 　　} 　　& lt;/style>

通过shell脚本自动生成vue文件的示例分析