如何通过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 相关文章推荐
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
AngularJS身份验证的方法
Feb 17 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
js实现下拉框效果(select)
Mar 28 Javascript
vue项目部署到Apache服务器中遇到的问题解决
Aug 24 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 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
人大复印资料处理程序_查询篇
2006/10/09 PHP
php获取访问者浏览页面的浏览器类型
2017/01/23 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
JavaScript中的this关键字介绍与使用实例
2013/06/21 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
2014/09/03 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
使用typescript开发angular模块并发布npm包
2018/04/19 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
微信小程序提交form操作示例
2018/12/30 Javascript
vue移动端下拉刷新和上滑加载
2020/10/27 Javascript
[01:11:11]Alliance vs RNG 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
Python构建图像分类识别器的方法
2019/01/12 Python
python中property和setter装饰器用法
2019/12/19 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
Django模板报TemplateDoesNotExist异常(亲测可行)
2020/12/18 Python
澳大利亚首个在线预订旅游网站:Wotif
2017/07/19 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
带薪年假请假条
2014/02/04 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
小学生爱国演讲稿
2014/04/25 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL