如何通过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 自定义类型方法小结
Mar 02 Javascript
jQuery中通过ajax调用webservice传递数组参数的问题实例详解
May 20 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
vue使用vue-cli快速创建工程
Jul 28 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
世界上最短的数字判断js代码
Sep 09 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 Javascript
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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
用PHP和ACCESS写聊天室(一)
2006/10/09 PHP
php连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
Yii中CGridView实现批量删除的方法
2015/12/28 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP实现递归的三种方法
2020/07/04 PHP
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
JSONP原理及简单实现
2016/06/08 Javascript
深入理解javascript的getTime()方法
2017/02/16 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
Element输入框带历史查询记录的实现示例
2019/01/15 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
详解Django通用视图中的函数包装
2015/07/21 Python
Python在Console下显示文本进度条的方法
2016/02/14 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
浅谈Python基础之I/O模型
2017/05/11 Python
python的Tqdm模块的使用
2018/01/10 Python
python Opencv将图片转为字符画
2021/02/19 Python
Python 实现一行输入多个值的方法
2018/04/21 Python
Python判断一个文件夹内哪些文件是图片的实例
2018/12/07 Python
树莓派实现移动拍照
2019/06/22 Python
Python三元运算与lambda表达式实例解析
2019/11/30 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
python中最小二乘法详细讲解
2021/02/19 Python
跟单文员岗位职责
2014/01/03 职场文书
病媒生物防治方案
2014/05/13 职场文书
党员民主评议个人总结
2014/10/20 职场文书
个人借款协议书范本
2014/11/17 职场文书
2014年工程部工作总结
2014/11/25 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书