不知道大家每次新建元件的時候,是不是都要建立乙個目錄,然後新增乙個.vue檔案,然後寫template、script、style這些東西,如果是公共元件,是不是還要新建乙個index.js用來匯出vue元件、雖然有vscode有**片段能實現自動補全,但還是很麻煩,今天靈活運用scripts工作流,自動生成vue檔案和目錄。
template.js檔案,裡面的內容可以自己自定義,符合當前專案的模板即可
// template.js
module.exports = 元件 `
},entrytemplate: `import main from './main.vue'
export default main`
}
generatecomponent.js生成vue目錄和檔案的**
// generatecomponent.js`
const chalk = require('chalk') // 控制台列印彩色
const path = require('path')
const fs = require('fs')
const resolve = (...file) => path.resolve(__dirname, ...file)
const log = message => console.log(chalk.green(`$`))
const successlog = message => console.log(chalk.blue(`$`))
const errorlog = error => console.log(chalk.red(`$`))
const = require('./template')
const _ = process.ar**.splice(2)[0] === '-com'
const generatefile = (path, data) => 檔案已存在`)
return
} return new promise((resolve, reject) => else
})})
}// 公共元件目錄src/base,全域性註冊元件目錄src/base/global,頁面元件目錄src/components
_ ? log('請輸入要生成的元件名稱、如需生成全域性元件,** global/ 字首') : log('請輸入要生成的頁面元件名稱、會生成在 components/目錄下')
let componentname = ''
process.stdin.on('data', async chunk => 元件目錄已存在,請重新輸入`)
return
} else `)
await dotexistdirectorycreate(componentdirectory)
}try else
log(`正在生成 vue 檔案 $`)
await generatefile(componentvuename, vuetemplate(componentname))
log(`正在生成 entry 檔案 $`)
await generatefile(entrycomponentname, entrytemplate)
successlog('生成成功')
} catch (e)
} else .vue`)
const hascomponentdirectory = fs.existssync(componentdirectory)
if (hascomponentdirectory) 元件目錄已存在,直接生成vue檔案`)
} else `)
await dotexistdirectorycreate(componentdirectory)
}try `)
await generatefile(componentvuename, vuetemplate(componentname))
successlog('生成成功')
} catch (e)
} process.stdin.emit('end')
})process.stdin.on('end', () => )
function dotexistdirectorycreate (directory) )
})}// 遞迴建立目錄
function mkdirs (directory, callback) else )
}}
"scripts": ,
npm run new:view // 生成頁元件
npm run new:com // 生成基礎元件
或者yarn run new:view // 生成頁元件
yarn run new:com // 生成基礎元件
通過npm或yarn自動生成vue元件
不知道大家每次新建元件的時候,是不是都要建立乙個目錄,然後新增乙個.vue檔案,然後寫template script style這些東西,如果是公共元件,是不是還要新建乙個index.js用來匯出vue元件 雖然有vscode有 片段能實現自動補全,但還是很麻煩,今天靈活運用scripts工作流,自...
vscode 通過批處理快速自動生成c 專案
vscode 如何不敲命令生成c 專案。1.在儲存所有專案的資料夾下新建文字檔案。2.副檔名改為.bat。3.右鍵 通過vscode 開啟。4.輸入以下 儲存。echo off 1 set p projname input c project name if not exist projname d...
批量查詢語句如何通過儲存過程來自動生成
平時我們工作中常常會遇到分庫分表後,單單根據乙個條件無法定位該資訊具體是在哪個表中的時候,我們就需要多表搜尋,可是如果是在100張表裡面,我們還需要寫100條select語句嗎?這裡我們可以批量生成select語句。批量列印查詢條件 select from user channel info 0 u...