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



在前端根目录创建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

浙公网安备 33010602011771号