// 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('请输入要生成的组件名称、如需生成全局组件，请加 global/ 前缀') let componentName = '' process.stdin.on('data', async chunk => { const inputName = String(chunk).trim().toString() /** * 组件目录路径 */ const componentDirectory = resolve('../../src/components', inputName) /** * vue组件路径 */ const componentVueName = resolve(componentDirectory, 'main.vue') /** * 入口文件路径 */ const entryComponentName = resolve(componentDirectory, 'index.js') const hasComponentDirectory = fs.existsSync(componentDirectory) if (hasComponentDirectory) { errorLog(`${inputName}组件目录已存在，请重新输入`) return } else { log(`正在生成 component 目录 ${componentDirectory}`) await dotExistDirectoryCreate(componentDirectory) // fs.mkdirSync(componentDirectory); } try { if (inputName.includes('https://www.jb51.net/')) { const inputArr = inputName.split('https://www.jb51.net/') 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) } 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() }) } }
template.js
// template.js module.exports = { vueTemplate: compoenntName => { return `<template> <div> ${compoenntName}组件 </div> </template> <script> export default { name: '${compoenntName}' }; </script> <style lang="stylus" scoped> .${compoenntName} { }; </style>` }, entryTemplate: `import Main from './main.vue' export default Main` }
2.1 配置package.json
"new:comp": "node ./scripts/generateComponent/index"
如果使用 npm 的话 就是 npm run new:comp
如果是 yarn 自行修改命令
2.2 结果
通过以上的 vue-cli3 优化，我们项目在开发的过程中就能非常方便的通过命令快速创建公共组件和其他页面了，在页面、组件比较多的项目中，可以为我们提高一些效率，也可以通过这样的命令，来控制团队内不同人员新建文件的格式规范。
总结
以上所述是小编给大家介绍的vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
您可能感兴趣的文章: