vue2 使用Markfile 命令创建新增组件模板

项目开发中封装了许多图表组件，每次新增组件或者组件迭代都要复制前后端的文件，为了避免重复操作，使用一键命令创建组件模板文件。

效果如下：

 

 

 

 

 

 

 

 

 

 在前端根目录创建Markfile 文件，里面是我们自定义的命令:

 

?

1 2 3 4 5

addcom:     node build/addCom.js $(filter-out $@,$(MAKECMDGOALS))   editcom:      node build/editCom.js $(filter-out $@,$(MAKECMDGOALS))

　具体新增组件实现逻辑如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

"use strict";   process.on("exit", () => {   console.log(); });   if (!process.argv[2]) {   console.error(     "请重新输入组件名"   );   process.exit(1); }   const path = require("path"); const fs = require("fs"); const fileSave = require("file-save"); const uppercamelcase = require("uppercamelcase"); // 驼峰命名 const componentname = process.argv[2]; // 组件名 const chineseName = process.argv[3] || componentname; // 中文名 let componentType = process.argv[4] ||  'text'; // 类型 const ComponentName = uppercamelcase(componentname); const comPath = '根据个人需求拼接'; // 组件vue路径 const jsonPath = "根据个人需求拼接"; // 组件json路径 const PackagePath = path.resolve(   __dirname,   "vue公共目录",   comPath ); // son路径 const comJsonPath = path.resolve(   __dirname,   "json公共目录",   jsonPath ); // 定义vue创建的文件模板 const vueFiles = [   {     filename: `${componentname}.vue`,     content: `<template>   <div >创建模板</div> </template>   <script> export default {   name: '${ComponentName}',   props: ["pageConfig"],   data(){     return {       }   },   mounted(){     },   created(){     },   methods:{     },   watch:{     } }; </script>`   } ];     fileSave(path.join(PackagePath, vueFiles[0].filename))     .write(vueFiles[0].content, "utf8")     .end("\n"); // 定义后台json创建的文件模板 const jsonFile = [   {     filename: `${componentname}.json`,     content: `{     "name": "${chineseName}",     "id": "id",     "type": "${componentType}",     "com_name": "${componentname}",      ..................................      "config": {}},     "api_data": {         "source": []     },     "events": {         "allEvents": []     } }`   } ]; // 创建后台文件 fileSave(path.join(comJsonPath, jsonFile[0].filename))   .write(jsonFile[0].content, "utf8")   .end("\n"); console.log("新增组件成功");

　　具体操作还是看项目需求，如果需要创建的文件特别多，可以把要生成的文件统一放在一个变量进行处理。

     在Markfile 文件目录进入终端执行命令  Ubuntu 和 Mac 支持 make 命令   不支持可以用 node