您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“如何通過npm或yarn自動(dòng)生成vue組件”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“如何通過npm或yarn自動(dòng)生成vue組件”這篇文章吧。
實(shí)踐步驟
安裝一下chalk,這個(gè)插件能讓我們的控制臺(tái)輸出語句有各種顏色區(qū)分
npm install chalk --save-dev yarn add chalk --save-dev
在根目錄中創(chuàng)建一個(gè) scripts 文件夾
新增一個(gè)generateComponent.js文件,放置生成組件的代碼
新增一個(gè)template.js文件,放置組件模板的代碼
template.js文件,里面的內(nèi)容可以自己自定義,符合當(dāng)前項(xiàng)目的模板即可
// template.js module.exports = { vueTemplate: compoenntName => { return `<template> <div class="${compoenntName}"> ${compoenntName}組件 </div> </template> <script> export default { name: '${compoenntName}' } </script> <style scoped lang="stylus" rel="stylesheet/stylus"> .${compoenntName} { } </style> ` }, entryTemplate: `import Main from './main.vue' export default Main` }
generateComponent.js生成vue目錄和文件的代碼
// generateComponent.js` const chalk = require('chalk') // 控制臺(tái)打印彩色 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 _ = process.argv.splice(2)[0] === '-com' 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) } }) }) } // 公共組件目錄src/base,全局注冊(cè)組件目錄src/base/global,頁面組件目錄src/components _ ? log('請(qǐng)輸入要生成的組件名稱、如需生成全局組件,請(qǐng)加 global/ 前綴') : log('請(qǐng)輸入要生成的頁面組件名稱、會(huì)生成在 components/目錄下') let componentName = '' process.stdin.on('data', async chunk => { const inputName = String(chunk).trim().toString() // 根據(jù)不同類型組件分別處理 if (_) { // 組件目錄路徑 const componentDirectory = resolve('../src/base', inputName) // vue組件路徑 const componentVueName = resolve(componentDirectory, 'main.vue') // 入口文件路徑 const entryComponentName = resolve(componentDirectory, 'index.js') const hasComponentDirectory = fs.existsSync(componentDirectory) if (hasComponentDirectory) { errorLog(`${inputName}組件目錄已存在,請(qǐng)重新輸入`) return } else { log(`正在生成 component 目錄 ${componentDirectory}`) await dotExistDirectoryCreate(componentDirectory) } try { if (inputName.includes('/')) { const inputArr = inputName.split('/') componentName = inputArr[inputArr.length - 1] } else { componentName = inputName } log(`正在生成 vue 文件 ${componentVueName}`) await generateFile(componentVueName, vueTemplate(componentName)) log(`正在生成 entry 文件 ${entryComponentName}`) await generateFile(entryComponentName, entryTemplate) successLog('生成成功') } catch (e) { errorLog(e.message) } } else { const inputArr = inputName.split('/') const directory = inputArr[0] let componentName = inputArr[inputArr.length - 1] // 頁面組件目錄 const componentDirectory = resolve('../src/components', directory) // vue組件 const componentVueName = resolve(componentDirectory, `${componentName}.vue`) const hasComponentDirectory = fs.existsSync(componentDirectory) if (hasComponentDirectory) { log(`${componentDirectory}組件目錄已存在,直接生成vue文件`) } else { log(`正在生成 component 目錄 ${componentDirectory}`) await dotExistDirectoryCreate(componentDirectory) } try { log(`正在生成 vue 文件 ${componentName}`) await generateFile(componentVueName, vueTemplate(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) }) }) } // 遞歸創(chuàng)建目錄 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是為了區(qū)別是創(chuàng)建頁面組件還是公共組件
"scripts": { "new:view":"node scripts/generateComponent", "new:com": "node scripts/generateComponent -com" },
執(zhí)行
npm run new:view // 生成頁組件 npm run new:com // 生成基礎(chǔ)組件 或者 yarn run new:view // 生成頁組件 yarn run new:com // 生成基礎(chǔ)組件
以上是“如何通過npm或yarn自動(dòng)生成vue組件”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。