项目开发中封装了许多图表组件，每次新增组件或者组件迭代都要复制前后端的文件，为了避免重复操作，使用一键命令创建组件模板文件。
效果如下：
在前端根目录创建Markfile 文件，里面是我们自定义的命令:
addcom:
node build/addCom.js $(filter-out $@,$(MAKECMDGOALS))
editcom:
node build/editCom.js $(filter-out $@,$(MAKECMDGOALS))
具体新增组件实现逻辑如下：
"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
标签：const,Markfile,process,componentname,vue2,组件,path,模板 From： https://www.cnblogs.com/hardmeng/p/16924496.html