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

2019-11-19 11:40:09

字体：大中小

来源：转载

供稿：网友

介绍

做前端的大家都知道通过 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.jsconst 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.jsmodule.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.jsmodule.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"