不知道是不是每次新建组件都需要创建一个目录，然后添加一个. vue文件，然后写模板、脚本和样式。如果它是一个公共组件，您需要创建一个新的index.js来导出vue组件。虽然有vscode和代码片段可以自动完成，但还是很麻烦。如今，脚本工作流被灵活地用于自动生成vue文件和目录。

实际步骤

安装粉笔，这个插件可以让我们的控制台输出语句有各种颜色

NPM安装粉笔-保存-开发纱添加粉笔-保存-开发在根目录下创建一个脚本文件夹

添加一个generateComponent.js文件来放置生成的组件的代码

添加一个template.js文件来放置组件模板的代码

模板. js文件，内容可以自己定制，可以满足当前项目的模板

//template . js module . exports={ vuetemplat : component name={ return ` template div class=' $ { component name } ' $ { component name } component/div/templatescript export default { name : ' $ { component name } ' }/script style作用域lang=' stylus ' rel='样式表/手写笔'。$ { componentname } { }/style `}，Entry模板： '从导入main '。/main.vue' export default main`}生成用于生成vue目录和文件的component.js代码

//generateComponent.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 _=process。argv。拼接(2)[0]=='-com ' const生成文件=(路径，数据)={ if (fs.existsSync(路径)){ errorLog(`${path}文件已存在`)返回}返回新的承诺((解决，拒绝)={ fs.writeFile(路径，数据，' utf8 '，err={ if(err){错误日志(err。message)reject(err)} else { resolve(true)} } })}//公共组件目录src/基地，全局注册组件目录src/基地/全球，页面组件目录src/组件_?日志('请输入要生成的组件名称、如需生成全局组件，请加全球/前缀):日志('请输入要生成的页面组件名称、会生成在组件/目录下)让组件名=' '进程。stdin。在('数据')上，异步块={常量输入名称=字符串(块).修剪()。toString() //根据不同类型组件分别处理if (_) { //组件目录路径const componentDirectory=resolve('./src/base '，inputName) //vue组件路径const componentVueName=resolve(组件目录，“main . vue”)//入口文件路径const entry component name=resolve(组件目录，索引。js’)const has component目录=fs。existssync(组件目录)if(hascomponent目录){错误日志(`$ { inputName }组件目录已存在，请重新输入`)返回} else { log(` 0正在生成成分目录$ { componentDirectory } `)等待dotExistDirectoryCreate(组件目录)}尝试{ if(输入名称。包括('/'){常量输入字符=输入名称。拆分('/')组件名称=输入标记[输入标记]。length-1]} else {组件名=输入名}日志(`正在生成某视频剪辑软件文件${componentVueName} `)等待生成文件(组件名称，组件名称)日志(`正在生成进入文件${entryComponentName} `)等待生成文件(entryComponentName，entryTemplate)成功日志('生成成功)} catch(e){错误日志(e . message)} } else { const input tarr=input name。split('/')常量目录=输入tarr[0]让组件名=输入tarr[输入tarr。长度-1]//页面组件目录const componentDirectory=resolve('./src/components '，目录)//vue组件const ComponentVuname=resolve(component directory，` $ { componentName }。vue `)const HasComponentActiVe=fs。existssync(component directory)if(hascomponent directory){ log(`$ { component directory }组件目录已存在，直接生成某视频剪辑软件文件`)} else { log(`正在生成成分目录$ { componentDirectory } `)等待doetxistdirectorycreate(组件目录)尝试{日志(` 0正在生成某视频剪辑软件文件${componentName} `)等待生成文件(组件vu名，vueTemplate(组件名))成功日志('生成成功)} 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(目录)回调()}}配置package.json，脚本新增两行命令，其中-com是为了区别是创建页面组件还是公共组件

脚本： { 'new:view': '节点脚本/generateComponent '，' new:com': '节点脚本/generateComponent -com' }，执行

新公共管理运行new:view /生成页组件新公共管理运行new:com /生成基础组件或者纱线运行new:view /生成页组件纱线运行new:com /生成基础组件

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