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

 

posted @ 2022-11-25 11:02  风紧了  阅读(83)  评论(0)    收藏  举报
/* 点击爆炸效果*/ /* 鼠标点击求赞文字特效 */ /*鼠标跟随效果*/