快捷導(dǎo)航

如何通過shell腳本自動生成vue文件詳解

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

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

前言

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

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

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

使用方法

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

package.json

2、在項目根目錄新建一個template文件夾放自己的模板文件

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

模板

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

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

效果

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

名稱重復(fù)

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

生成后的文件

create.sh 腳本文件

修改COMPONENT_PATH 和 PAGE_PATH 路徑改變?yōu)樽约赫鎸嵞０迓窂?br />

運(yùn)行該腳本后

組件會在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 "未發(fā)現(xiàn)名稱, 請輸入名稱？"
 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>

總結(jié)

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

您可能感興趣的文章: