.${compoenntName}{};介绍做前端的都知道，每次创建通过vue开发的项目，都要新建一个目录，然后要新建一个.vue文件添加。在此文件中编写模板、脚本和样式。虽然每个人在写作时都有自己的自动补全总计，但这些都是模板。每次都要重复操作，非常麻烦。.本文使用node来帮助我们自动执行这些重复的操作，我们只需要告诉控制台我们需要创建的组件的名称即可。本文自动创建的组件包含两个文件：入口文件index.js，vue文件main.vue1.1chalktool为了方便我们看到控制台输出的各种语句，我们安装chalknpminstallchalk--save-dev1.2创建视图在根目录下创建一个scripts文件夹在scripts中创建一个generateView文件夹在generateView中新建一个index.js，放置生成组件的代码在generateView中新建一个template.js，放置组件的代码template，模板内容可以修改index.js//index.jsconstchalk=require('chalk')constpath=require('path')constfs=require('fs')constresolve=(...file)=>path.resolve(__dirname,...file)constlog=message=>console.log(chalk.green(`${message}`))constsuccessLog=message=>console.log(chalk.blue(`${message}`))consterrorLog=error=>console.log(chalk.red(`${error}`))//importtemplateconst{vueTemplate,entryTemplate}=require('./template')//生成文件constgenerateFile=(path,data)=>{if(fs.existsSync(path)){errorLog(`${path}filealreadyexists`)return}returnnewPromise((resolve,reject)=>{fs.writeFile(path,data,'utf8',err=>{if(err){errorLog(err.message)reject(err)}else{resolve(true)}})})}log('请输入要生成的页面组件的名称，它将生成在views/目录下')letcomponentName=''process.stdin.on('data',asyncchunk=>{//组件名称constinputName=String(chunk).trim().toString()//Vue页面组件路径constcomponentPath=resolve('../../src/views',inputName)//vue文件constvueFile=resolve(componentPath,'main.vue')//入口文件constentryFile=resolve(componentPath,'entry.js')//确定组件文件夹是否存在consthasComponentExists=fs.existsSync(componentPath)if(hasComponentExists){errorLog(`${inputName}页面组件已经存在，请重新输入`)return}else{log(`组件目录${componentPath}`isbeinggenerated)awaitdotExistDirectoryCreate(componentPath)}try{//获取组件名称if(inputName.includes('/')){constinputArr=inputName.split('/')componentName=inputArr[inputArr.length-1]}else{componentName=inputName}log(`正在生成vue文件${vueFile}`)awaitgenerateFile(vueFile,vueTemplate(componentName))log(`正在生成entry文件${entryFile}`)awaitgenerateFile(entryFile,entryTemplate(componentName))successLog('生成成功')}catch(e){errorLog(e.message)}process.stdin.emit('end')})process.stdin.on('end',()=>{log('exit')process.exit()})functiondotExistDirectoryCreate(directory){returnnewPromise((resolve)=>{mkdirs(directory,function(){resolve(true)})})}//递归创建目录functionmkdirs(directory,callback){varexists=fs.existsSync(directory)if(exists){callback()}else{mkdirs(path.dirname(directory),function(){fs.mkdirSync(目录)callback()})}}template.js//template.jsmodule.exports={vueTemplate:组件名称=>{return`${compoenntName}组件
