vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component

更新时间：2020-08-24 09:30:01 作者：startmvc

介绍做前端的大家都知道通过vue开发的项目每次创建新组建的时候，都要新建一个目录，然

介绍

做前端的大家都知道通过 vue 开发的项目每次创建新组建的时候，都要新建一个目录，然后新增 .vue 文件，在这个文件中再写入 template 、 script 、 style 这些内容，虽然在写入的时候大家都有自己的自动补全共计，不过这些都是模板性的，每次都要这样重复操作，很麻烦有没有。

本文就是通过node来帮助我们，自动去执行这些重复操作，而我们只需要告诉控制台我们需要创建的组件名字就可以了。本文自动创建的组件包含两个文件：入口文件 index.js 、vue文件 main.vue

chalk工具

为了方便我们能看清控制台输出的各种语句，我们先安装一下 chalk

npm install chalk --save-dev

1. 创建views

在根目录中创建一个 scripts 文件夹

在 scripts 中创建 generateView 文件夹
在 generateView 中新建 index.js ，放置生成组件的代码
在 generateView 中新建 template.js ，放置组件模板的代码，模板内容可根据项目需求自行修改

index.js


// 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页面组件路径
 const componentPath = resolve('../../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()
 })
 }
}

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}
}]`
 }
}

1.1 配置package.json

"new:view": "node ./scripts/generateView/index"

如果使用 npm 的话就是 npm run new:view 如果是 yarn 自行修改命令

1.2 结果

2. 创建component

跟views基本一样的步骤

在 scripts 中创建 generateComponent 文件夹
在 generateComponent 中新建 index.js ，放置生成组件的代码
在 generateComponent 中新建 template.js ，放置组件模板的代码，模板内容可根据项目需求自行修改

index.js


// 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('/')) {
 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)
 }
 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 class="${compoenntName}">
 ${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"