介绍

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

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

白垩工具

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

新公共管理安装粉笔-保存-开发

1.创建视图

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

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

//index.jsconst粉笔=require('粉笔)const path=require(' path ')const fs=require(' fs ')const resolve=(.文件)=路径。解析(_ dirname，文件)常量日志=消息=控制台。日志(粉笔。绿色(` $ { message } `)))const Successlog=message=console。日志(粉笔。蓝色(`$ { message } `)))常量错误日志=错误=控制台。日志(粉笔。红色(`${error}`))//导入模板const { vueTemplate，entryTemplate}=require(' ./template')//生成文件const generateFile=(路径，数据)={ if (fs.existsSync(路径)){ errorLog(`${path}文件已存在`)返回}返回新的承诺((解决，拒绝)={ fs.writeFile(路径，数据，' utf8 '，err={ if(err){错误日志(err。message)reject(err)} else { resolve(true)} } })} } log('请输入要生成的页面组件名称、会生成在观点/目录下)让组件名=' '进程。stdin。on(' data '，async chunk={ //组件名称常量输入名称=字符串（块)。修剪()。toString() //Vue页面组件路径const componentPath=resolve('././src/view '，inputName) //vue文件const vueFile=resolve(组件路径，“main . vue”)//入口文件const entryFile=resolve(componentPath，' entry.js') //判断组件文件夹是否存在const hasComponentExists=fs。existssync(组件路径)if(hasComponentExists){错误日志(`$ { inputName }页面组件已存在，请重新输入`)返回} else { log(` 0正在生成成分目录${componentPath} `)等待DotExistdirectorycreate(组件路径)}尝试{ //获取组件名if(输入名称。包括('/'){ const input tarr=输入名称。split('/')组件名=input tarr[input tarr。length-1]} else {组件名=输入名}日志(` 0正在生成某视频剪辑软件文件${vueFile} `)等待generateFile(vueFile，vueTemplate(componentName))日志(`正在生成进入文件${entryFile} `)等待生成文件(entryFile，entryTemplate(组件名))成功日志('生成成功)} catch(e){错误日志(e . message)}进程。stdin。emit(' end ')})进程。stdin。on(' end '，()={ log(' exit ')进程。exit()})函数dotexisdorycreate(目录){返回新的Promise((resolve)={ mkdirs(目录，函数(){ resolve(true)})}//递归创建目录函数mkdirs(目录，回调){ var exists=fs.existsSync(目录)if(存在){ callback()} else { mkdirs(路径。目录名(目录)，函数(){ fs.mkdirSync(目录)回调()})}模板。射流研究…

//模板。js模块。exports={ vuetemplatee : component name={ return ` template div class=' $ { component name } ' $ { component name }组件/div/templatescriptexport默认值{ name : ' $ { componentname } ' }/script style lang="手写笔"范围$ { componentname } { }/style `}，entrytemplate : component name={ return ` import $ { component name } from ' ./main。vue ' export default[{ path : '/$ { component name } '，name: ' $ { compoenntName } '，component name : $ { component name } }]` } } 1.1配置package.json

new:view': '节点“/脚本/生成视图/索引”

如果使用新公共管理的话就是新公共管理运行新：视图如果是故事自行修改命令

1.2 结果

2.创建成分

跟视图基本一样的步骤

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

//index.js`const粉笔=require('粉笔)const path=require(' path ')const fs=require(' fs ')const resolve=(.文件)=路径。解析(_ dirname，文件)常量日志=消息=控制台。日志(粉笔。绿色(` $ { message } `)))const Successlog=message=console。日志(粉笔。蓝色(`$ { message } `)))常量错误日志=错误=控制台。日志(粉笔。red(`$ { error } `))const { vueTemplate，entryTemplate}=require(' ./template')const generateFile=(路径，数据)={ if (fs.existsSync(路径)){ errorLog(`${path}文件已存在`)返回}返回新的承诺((解决，拒绝)={ fs.writeFile(路径，数据，' utf8 '，err={ if(err){错误日志(err。message)reject(err)} else { resolve(true)} } })} } log('请输入要生成的组件名称、如需生成全局组件，请加全球/前缀)让组件名=' '进程。stdin。在('数据')上，异步块={常量输入名称=字符串(块).修剪()。toString() /** *组件目录路径*/const组件目录=resolve('././src/components '，inputName) /** * vue组件路径*/const componentVueName=resolve(组件目录，“main . vue”)/* * *入口文件路径*/const entrycomponent name=resolve(组件目录，索引。js’)const has component目录=fs。existssync(组件目录)if(hascomponent目录){错误日志(`$ { inputName }组件目录已存在，请重新输入`)返回} else { log(` 0正在生成成分目录$ { componentDirectory } `)等待dotExistDirectoryCreate(组件目录)//fs。mkdirsync(组件目录)；}请尝试{ if(输入名称。包括('/')} {常量输入字符=输入名称。拆分('/')组件名称=输入标记[输入标记]。length-1]} else {组件名=输入名}日志(`正在生成某视频剪辑软件文件${componentVueName} `)等待生成文件(组件名称，组件名称)日志(`正在生成进入文件${entryComponentName} `)等待生成文件(entryComponentName，entryTemplate)成功日志('生成成功)} catch(e){错误日志(e . message)}进程。stdin。emit(' end ')})进程。stdin。on(' end '，()={ log(' exit ')进程。exit()})函数dotexisdorycreate(目录){返回新的Promise((resolve)={ mkdirs(目录，函数(){ resolve(true)})}//递归创建目录函数mkdirs(目录，回调){ var exists=fs.existsSync(目录)if(存在){ callback()} else { mkdirs(路径。目录名(目录)，函数(){ fs.mkdirSync(目录)回调()})}模板。射流研究…

//模板。js模块。exports={ vuetemplatee : component name={ return ` template div class=' $ { component name } ' $ { component name }组件/div/templatescriptexport默认值{ name : ' $ { componentname } ' }/script style lang="手写笔"范围$ { componentname } { }/style `}，entryTemplate: `从导入主要的./main。vue ' export default main ` } 2.1配置package.json

new:comp': '节点。/脚本/生成组件/索引'

如果使用npm，则是npm运行new:comp。如果纱线自行修改命令2.2的结果，

有了vue-cli3的上述优化，我们在项目开发过程中通过命令快速创建常用组件和其他页面就非常方便了。在页面和组件较多的项目中，我们可以提高一些效率，也可以通过这样的命令来控制团队中不同人创建的新文件的格式规范。

摘要

以上是边肖介绍的vue-cli3项目的优化，通过节点自动生成component模板生成View和Component。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！