這篇文章將為大家詳細講解有關通過shell腳本自動生成vue文件的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司成立與2013年，是專業(yè)互聯(lián)網技術服務公司，擁有項目成都網站設計、成都網站建設網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元永吉做網站,已為上家服務,為永吉各地企業(yè)和個人服務,聯(lián)系電話:13518219792

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

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

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

使用方法

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

package.json

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

文件內容根據項目需要自行修改

模板

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

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

效果

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

名稱重復

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

生成后的文件

create.sh 腳本文件

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

運行該腳本后

組件會在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

模板組件參考

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

.class- {
}

模板頁面參考

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

.class- {
}

關于“通過shell腳本自動生成vue文件的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。