如何通过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 String.replace的妙用
Sep 08 Javascript
jquery对ajax的支持介绍
Dec 10 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
jquery序列化表单去除指定元素示例代码
Apr 10 Javascript
JQuery动态添加和删除表格行的方法
Mar 09 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
JavaScript中的ES6 Proxy的具体使用
Jun 16 Javascript
JavaScript生成一个不重复的ID的方法示例
Sep 16 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
JavaScript实现前端网页版倒计时
Mar 24 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 array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php 中的closure用法详解
2017/06/12 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
javascript实现类似百度分享功能的方法
2015/07/27 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
详解vue中使用express+fetch获取本地json文件
2017/10/10 Javascript
JS左右无缝轮播功能完整实例
2019/05/16 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
使用layui实现树形结构的方法
2019/09/20 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
python实现linux服务器批量修改密码并生成execl
2014/04/22 Python
Python中type的构造函数参数含义说明
2015/06/21 Python
python爬虫获取新浪新闻教学
2018/12/23 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
jupyter notebook的安装与使用详解
2020/05/18 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
护理自荐信
2013/10/22 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
日语专业求职信
2014/07/04 职场文书
武当山导游词
2015/02/03 职场文书
经典搞笑版检讨书
2015/02/19 职场文书
记者节感言
2015/08/03 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
html+css实现赛博朋克风格按钮
2021/05/26 HTML / CSS
关于PHP数组迭代器的使用方法实例
2021/11/17 PHP