快捷導(dǎo)航

如何通過shell腳本自動(dòng)生成vue文件詳解

更新時(shí)間：2019年09月10日 11:48:58 作者：Jarvan丶

這篇文章主要給大家介紹了關(guān)于如何通過shell腳本自動(dòng)生成vue文件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

最近在寫nuxt項(xiàng)目時(shí)候每次新建頁面都要去新建然后引入各種需要的依賴很是麻煩，所以想寫一個(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文件夾下新建組件

頁面會(huì)在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 "請(qǐng)問代碼 $NAME - 是否是組件 ? (y/n)" -n 1 -r
else
 echo "未發(fā)現(xiàn)名稱, 請(qǐng)輸入名稱？"
 read NAME
 read -p "請(qǐng)問代碼 $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>

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: