通過(guò)shell腳本自動(dòng)生成vue文件的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)通過(guò)shell腳本自動(dòng)生成vue文件的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

最近在寫nuxt項(xiàng)目時(shí)候每次新建頁(yè)面都要去新建然后引入各種需要的依賴很是麻煩，所以想寫一個(gè)腳本自動(dòng)生成文件 省去手動(dòng)新建

現(xiàn)寫下實(shí)現(xiàn)方法 給大家參考

Mac下可直接運(yùn)行
Windows下需要安裝Cygwin類軟件且配置環(huán)境變量后運(yùn)行

使用方法

1、需要修改package.json 的scrpts 加一條create 或者自定義名字 主要是為了我們?cè)趖erminal中輸入指令后運(yùn)行對(duì)應(yīng)的腳本

package.json

2、在項(xiàng)目根目錄新建一個(gè)template文件夾放自己的模板文件

文件內(nèi)容根據(jù)項(xiàng)目需要自行修改

模板

3、之后在build文件夾下新建 create.sh 腳本文件 (代碼在下面)

4、之后在terminal中輸入 npm run create 指令 這個(gè)指令支持 后面攜帶一個(gè)不必傳參數(shù)作為文件名 (npm run create xxxx) 或者直接輸入npm run create

效果

文件名不能重復(fù) 如果重復(fù)不會(huì)覆蓋原有文件 只會(huì)輸出錯(cuò)誤

名稱重復(fù)

生成后的文件以及文件內(nèi)容

生成后的文件

create.sh 腳本文件

修改COMPONENT_PATH 和 PAGE_PATH 路徑改變?yōu)樽约赫鎸?shí)模板路徑

運(yùn)行該腳本后

組件會(huì)在components文件夾下新建組件

頁(yè)面會(huì)在pages 文件夾下新建頁(yè)面

#!/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 "開(kāi)始生成代碼..."
COMPONENT_PATH="./template/component.vue"
PAGE_PATH="./template/page.vue"
if [[ -n $1 ]]
then
 NAME=$1
 read -p "請(qǐng)問(wèn)代碼 $NAME - 是否是組件 ? (y/n)" -n 1 -r
else
 echo "未發(fā)現(xiàn)名稱, 請(qǐng)輸入名稱？"
 read NAME
 read -p "請(qǐng)問(wèn)代碼 $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>

模板頁(yè)面參考

<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>

關(guān)于“通過(guò)shell腳本自動(dòng)生成vue文件的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。