如何通过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 写的一个简单的timer
Jul 30 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
JS设计模式之单例模式(一)
Sep 29 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
vue 中的keep-alive实例代码
Jul 20 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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
上海无线电三厂简史修改版
2021/03/01 无线电
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php检查字符串中是否包含7位GSM字符的方法
2015/03/17 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
Laravel框架表单验证操作实例分析
2019/09/30 PHP
Iframe 自适应高度并实时监控高度变化的js代码
2009/10/30 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
js重写方法的简单实现
2016/07/10 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
js实现点击烟花特效
2020/10/14 Javascript
python使用mailbox打印电子邮件的方法
2015/04/30 Python
Python实现读取json文件到excel表
2017/11/18 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
2019/12/31 Python
基于python 凸包问题的解决
2020/04/16 Python
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
2019史上最全Database工程师题库
2015/12/06 面试题
区域销售经理岗位职责
2013/12/10 职场文书
党支部综合考察材料
2014/05/19 职场文书
小学生交通安全寄语
2015/02/27 职场文书
防汛通知
2015/04/25 职场文书
老员工辞职信范文
2015/05/12 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫
Windows 64位 安装 mysql 8.0.28 图文教程
2022/04/19 MySQL