如何通过shell脚本自动生成vue文件详解

#!/usr/bin/env sh
create () {
 if [[ $REPLY =~ ^[Yy]$ ]]
 then
  PATH_DIR="./ponents/$NAME"
 else
  PATH_DIR="./pages/$NAME"
 fi

 if [ ! -d "$PATH_DIR" ]
 then
 mkdir $PATH_DIR
 if [[ $PATH_DIR =~ "ponents" ]]
 then
  CLASS_NAME="ponent-$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/ponent.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-">
 ponent
 </div>
</template>

<script>
export default {
 props: {},
 data() {
 return {}
 },
 methods: {
 init() {}
 }
}
</script>

<style lang="scss" scoped>
@import '@/mon/scss/var.scss';
@import '@/mon/scss/mixin.scss';

.class- {
}
</style>

<template>
 <div class="class-">
 page
 </div>
</template>

<script>
import { baseMixin } from '@/mon/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 '@/mon/scss/var.scss';
@import '@/mon/scss/mixin.scss';

.class- {
}
</style>