如何通过shell脚本自动生成vue文件详解


Posted in Javascript onSeptember 10, 2019

前言

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

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

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

使用方法

1、需要修改package.json 的scrpts 加一条create 或者自定义名字 主要是为了我们在terminal中输入指令后运行对应的脚本

如何通过shell脚本自动生成vue文件详解

package.json

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

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

如何通过shell脚本自动生成vue文件详解

模板

3、之后在build文件夹下新建 create.sh 脚本文件 (代码在下面)

4、之后在terminal中输入 npm run create 指令 这个指令支持 后面携带一个不必传参数作为文件名 (npm run create xxxx) 或者直接输入npm run create

如何通过shell脚本自动生成vue文件详解

效果

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

如何通过shell脚本自动生成vue文件详解
名称重复

生成后的文件以及文件内容

如何通过shell脚本自动生成vue文件详解
生成后的文件

create.sh 脚本文件

修改COMPONENT_PATH 和 PAGE_PATH 路径改变为自己真实模板路径

运行该脚本后

组件会在components文件夹下新建组件

页面会在pages 文件夹下新建页面

#!/usr/bin/env sh
create () {
 if [[ $REPLY =~ ^[Yy]$ ]]
 then
  PATH_DIR="./components/$NAME"
 else
  PATH_DIR="./pages/$NAME"
 fi

 if [ ! -d "$PATH_DIR" ]
 then
 mkdir $PATH_DIR
 if [[ $PATH_DIR =~ "components" ]]
 then
  CLASS_NAME="component-$NAME"
  cp $COMPONENT_PATH "$PATH_DIR/index.vue"
 else
  CLASS_NAME="page-$NAME"
  cp $PAGE_PATH "$PATH_DIR/index.vue"
 fi
 sed -i "" "s/class-name/$CLASS_NAME/" "$PATH_DIR/index.vue"
 echo -e "\n生成完成 \n... \n"
 else
 echo -e "\n已存在文件夹 \n$PATH_DIR"
 fi
}

set -e
echo "开始生成代码..."
COMPONENT_PATH="./template/component.vue"
PAGE_PATH="./template/page.vue"
if [[ -n $1 ]]
then
 NAME=$1
 read -p "请问代码 $NAME - 是否是组件 ? (y/n)" -n 1 -r
else
 echo "未发现名称, 请输入名称?"
 read NAME
 read -p "请问代码 $NAME - 是否是组件 ? (y/n)" -n 1 -r
fi
 create

模板组件参考

<template>
 <div class="class-">
 component
 </div>
</template>

<script>
export default {
 props: {},
 data() {
 return {}
 },
 methods: {
 init() {}
 }
}
</script>

<style lang="scss" scoped>
@import '@/common/scss/var.scss';
@import '@/common/scss/mixin.scss';

.class- {
}
</style>

模板页面参考

<template>
 <div class="class-">
 page
 </div>
</template>

<script>
import { baseMixin } from '@/common/mixins/index'

export default {
 mixins: [baseMixin],
 data() {
 return {}
 },
 async asyncData({ $axios }) {},
 head() {
 return {
  title: ''
 }
 },
 mounted() {
 this.init()
 },
 methods: {
 init() {}
 }
}
</script>

<style lang="scss" scoped>
@import '@/common/scss/var.scss';
@import '@/common/scss/mixin.scss';

.class- {
}
</style>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
简单实现js悬浮导航效果
Feb 05 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
js获取 gif 的帧数的代码实例
Sep 10 #Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 #Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 #Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 #Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 #Javascript
es6中reduce的基本使用方法
Sep 10 #Javascript
layui导出所有数据的例子
Sep 10 #Javascript
You might like
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP Cookei记录用户历史浏览信息的代码
2016/02/03 PHP
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
原生javaScript实现图片延时加载的方法
2014/12/22 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
2016/03/24 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
2016/06/25 Javascript
使用jQuery操作DOM的方法小结
2017/02/27 Javascript
JS路由跳转的简单实现代码
2017/09/21 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
Layui table field初始化加载时进行隐藏的方法
2019/09/19 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
修复 Django migration 时遇到的问题解决
2018/06/14 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
比较基础的php面试题及答案-编程题
2012/10/14 面试题
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
结构和类有什么异同
2012/07/16 面试题
劳资人员岗位职责
2013/12/19 职场文书
八项规定对照检查材料
2014/08/31 职场文书
公司授权委托书样本
2014/09/15 职场文书
关于工作经历的证明书
2014/10/11 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
导师工作推荐信
2015/03/27 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
2015年小学重阳节活动总结
2015/07/29 职场文书
读《推着妈妈去旅行》有感1500字
2019/10/15 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python