如何通过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 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
使用javascript解析二维码的三种方式
Nov 11 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
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
解密ThinkPHP3.1.2版本之独立分组功能应用
2014/06/19 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
2014/01/27 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
jquery-tips悬浮提示插件分享
2015/07/31 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
js实现类bootstrap模态框动画
2017/02/07 Javascript
xmlplus组件设计系列之文本框(TextBox)(3)
2017/05/03 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Flask之flask-session的具体使用
2018/07/26 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
Python小进度条显示代码
2019/03/05 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
利用python实现AR教程
2019/11/20 Python
老生常谈CSS中的长度单位
2016/06/27 HTML / CSS
前台文员个人求职信范文
2014/01/05 职场文书
工程安全员岗位职责
2014/03/09 职场文书
大学生应聘求职信
2014/05/26 职场文书
竞选学委演讲稿
2014/09/13 职场文书
财产保全担保书
2015/01/20 职场文书
2015年音乐教师个人工作总结
2015/05/20 职场文书
会议室使用管理制度
2015/08/06 职场文书