一个组件例子
创建组件和组件文档生成脚本
在 scripts 中创建以下几个文件，其中 create-comp.js 是用来生成自定义组件目录和自定义组件说明文档脚本， delete-comp.js 是用来删除无用的组件目录和自定义组件说明文档脚本， template.js 是生成代码的模板文件
|— create-comp.js
|
|— delete-comp.js
|
|— template.js
相关的代码如下，小主可以根据自己的需求进行相应的简单修改，下面的代码参考来源 vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
create-comp.js
// 创建自定义组件脚本
const chalk = require('chalk')
const path = require('path')
const fs = require('fs-extra')
const uppercamelize = require('uppercamelcase')
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,
mdDocs
} = 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('请输入要生成的组件名称,形如 demo 或者 demo-test')
let componentName = ''
process.stdin.on('data', async chunk => {
let inputName = String(chunk).trim().toString()
inputName = uppercamelize(inputName)
const componentDirectory = resolve('../packages', inputName)
const componentVueName = resolve(componentDirectory, `${inputName}.vue`)
const entryComponentName = resolve(componentDirectory, 'index.js')
const hasComponentDirectory = fs.existsSync(componentDirectory)
if (inputName) {
// 这里生成组件
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(componentName))
successLog('生成 component 成功')
