通过npm或yarn自动生成vue组件的方法示例

不知道大家每次新建组件的时候，是不是都要创建一个目录，然后新增一个.vue文件，然后写template、script、style这些东西，如果是公共组件，是不是还要新建一个index.js用来导出vue组件、虽然有vscode有代码片段能实现自动补全，但还是很麻烦，今天灵活运用scripts工作流，自动生成vue文件和目录。

实践步骤

安装一下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 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') // 控制台打印彩色
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,全局注册组件目录src/base/global,页面组件目录src/components
_ ? log('请输入要生成的组件名称、如需生成全局组件，请加 global/ 前缀') : log('请输入要生成的页面组件名称、会生成在 components/目录下')
let componentname = ''
process.stdin.on('data', async chunk => {
 const inputname = string(chunk).trim().tostring()

 // 根据不同类型组件分别处理
 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}组件目录已存在，请重新输入`)
   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)
  })
 })
}

// 递归创建目录
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": {
  "new:view":"node scripts/generatecomponent",
  "new:com": "node scripts/generatecomponent -com"
 },

执行

  npm run new:view // 生成页组件
  npm run new:com // 生成基础组件
  或者
  yarn run new:view // 生成页组件
  yarn run new:com // 生成基础组件

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。