通過node npm 自動生成Vue資料夾及檔案
阿新 • • 發佈:2020-07-28
這篇文章是看到別人的部落格上的,覺得特別適用,所以收藏起來,本人親自實踐,確實特別適用,需要注意下路徑,否則會報路徑錯誤
安裝一下chalk,這個外掛能讓我們的控制檯輸出語句有各種顏色區分
npm install chalk --save-dev
yarn add chalk --save-dev
在根目錄中建立一個 scripts 資料夾
新增一個generateComponent.js檔案,放置生成元件的程式碼
新增一個template.js檔案,放置元件模板的程式碼
template.js檔案,裡面的內容可以自己自定義,符合當前專案的模板即可
// template.js module.exports = { vueTemplate: compoenntName => { return `<template> <div class="${compoenntName}"> ${compoenntName}元件 </div> </template> <script> export default { name: '${compoenntName}' }; </script> <style lang="stylus" scoped> .${compoenntName} { }; </style>` }, entryTemplate: compoenntName => { return `import ${compoenntName} from './main.vue' export default [{ path: "/${compoenntName}", name: "${compoenntName}", component: ${compoenntName} }]` } }
generateComponent.js生成vue目錄和檔案的程式碼
// index.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(`${message}`)) const successLog = message => console.log(chalk.blue(`${message}`)) const errorLog = error => console.log(chalk.red(`${error}`)) // 匯入模板 const { vueTemplate, entryTemplate } = require('./template') // 生成檔案 const generateFile = (path, data) => { if (fs.existsSync(path)) { errorLog(`${path}檔案已存在`) return } return new Promise((resolve, reject) => { fs.writeFile(path, data, 'utf8', err => { if (err) { errorLog(err.message) reject(err) } else { resolve(true) } }) }) } log('請輸入要生成的頁面元件名稱、會生成在 views/目錄下') let componentName = '' process.stdin.on('data', async chunk => { // 元件名稱 const inputName = String(chunk).trim().toString() // Vue頁面元件路徑 **注意這裡的路徑,一定要寫對,我這裡是直接構建的vue-element-admin的專案,你們根據需要填寫路徑** const componentPath = resolve('../../../vue-element-admin-master/src/views', inputName) // vue檔案 const vueFile = resolve(componentPath, 'main.vue') // 入口檔案 const entryFile = resolve(componentPath, 'entry.js') // 判斷元件資料夾是否存在 const hasComponentExists = fs.existsSync(componentPath) if (hasComponentExists) { errorLog(`${inputName}頁面元件已存在,請重新輸入`) return } else { log(`正在生成 component 目錄 ${componentPath}`) await dotExistDirectoryCreate(componentPath) } try { // 獲取元件名 if (inputName.includes('/')) { const inputArr = inputName.split('/') componentName = inputArr[inputArr.length - 1] } else { componentName = inputName } log(`正在生成 vue 檔案 ${vueFile}`) await generateFile(vueFile, vueTemplate(componentName)) log(`正在生成 entry 檔案 ${entryFile}`) await generateFile(entryFile, entryTemplate(componentName)) successLog('生成成功') } catch (e) { errorLog(e.message) } process.stdin.emit('end') }) process.stdin.on('end', () => { log('exit') process.exit() }) function dotExistDirectoryCreate(directory) { return new Promise((resolve) => { mkdirs(directory, function() { resolve(true) }) }) } // 遞迴建立目錄 function mkdirs(directory, callback) { var exists = fs.existsSync(directory) if (exists) { callback() } else { mkdirs(path.dirname(directory), function() { fs.mkdirSync(directory) callback() }) } }
配置package.json,scripts新增兩行命令,其中-com是為了區別是建立頁面元件還是公共元件
**由於我是將scripts放在了build檔案下面,所以我這裡這樣寫**
"scripts": {
"new:view":"node ./build/scripts/generateView.js"
},
執行
npm run new:view // 生成頁元件 npm run new:com // 生成基礎元件 或者 yarn run new:view // 生成頁元件 yarn run new:com // 生成基礎元件
效果
由於本文章是從本人部落格賦值過來的 原部落格:[https://segmentfault.com/a/1190000018056163]