html创建scrpts方法,如何通过shell脚本自动生成Vue文件详解_情愿_前端开发者

前言

最近在写nuxt项目时候每次新建页面都要去新建然后引入各种需要的依赖很是麻烦,所以想写一个脚本自动生成文件 省去手动新建

现写下实现方法 给大家参考

Mac下可直接运行

Windows下需要安装Cygwin类软件且配置环境变量后运行

使用方法

1、需要修改package.json 的scrpts 加一条create 或者自定义名字 主要是为了我们在terminal中输入指令后运行对应的脚本

494145529bcfa48e545e32766c88bcd9.png

package.json

2、在项目根目录新建一个template文件夹放自己的模板文件

文件内容根据项目需要自行修改

8ebfad30d253bd08b53c7fa59251e055.png

模板

3、之后在build文件夹下新建 create.sh 脚本文件 (代码在下面)

4、之后在terminal中输入 npm run create指令 这个指令支持 后面携带一个不必传参数作为文件名 (npm run create xxxx) 或者直接输入npm run create

423c5f11fb3071c058ea8adea4d662df.gif

效果

文件名不能重复 如果重复不会覆盖原有文件 只会输出错误

dbd1538ea2b63eb267ff606d3eb2611e.gif

名称重复

生成后的文件以及文件内容

6c9dcd60818c11355301903b17abfc62.png

生成后的文件

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.

模板组件参考

component

export default {

props: {},

data() {

return {}

},

methods: {

init() {}

}

}

@import '@/common/scss/var.scss';

@import '@/common/scss/mixin.scss';

.class- {

}

模板页面参考

page

import { baseMixin } from '@/common/mixins/index'

export default {

mixins: [baseMixin],

data() {

return {}

},

async asyncData({ $axios }) {},

head() {

return {

title: ''

}

},

mounted() {

this.init()

},

methods: {

init() {}

}

}

@import '@/common/scss/var.scss';

@import '@/common/scss/mixin.scss';

.class- {

}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对前端开发者的支持。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值