前言
最近在寫nuxt項目時候每次新建頁面都要去新建然后引入各種需要的依賴很是麻煩，所以想寫一個腳本自動生成文件 省去手動新建
現寫下實現方法 給大家參考
Mac下可直接運行
Windows下需要安裝Cygwin類軟件且配置環境變量后運行
使用方法
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 路徑改變為自己真實模板路徑
運行該腳本后
組件會在components文件夾下新建組件
頁面會在pages 文件夾下新建頁面
#!/usr/bin/env shcreate () { 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 -eecho "開始生成代碼..."COMPONENT_PATH="./template/component.vue"PAGE_PATH="./template/page.vue"if [[ -n $1 ]]then NAME=$1 read -p "請問代碼 $NAME - 是否是組件 ? (y/n)" -n 1 -relse echo "未發現名稱, 請輸入名稱？" read NAME read -p "請問代碼 $NAME - 是否是組件 ? (y/n)" -n 1 -rfi 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>總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對武林網的支持。
新聞熱點
疑難解答
