为了多喝两杯奶茶☕，我给自己的项目写了自动化脚本

auto
├─ addComponent
│  ├─ add.js
│  └─ data.js
└─ page
   └─ index.js
复制代码

/** data.js **/
exports.data = [
  {
      folder:'button',
      componentsName:'button',
  },
  {
      folder:'radio',
      componentsName:'radio',
  }
];
复制代码

/** add.js **/
const fs = require("fs");
const path = require("path");
// 创建目录
function mkdirsSync(dirname) {
    //判断目录是否存在
  if (fs.existsSync(dirname)) {
      return true;
  } else {
      if (mkdirsSync(path.dirname(dirname))) {
          fs.mkdirSync(dirname);
          return console.log(`创建目录成功-${dirname}`);
      }
  }   
}
mkdirsSync(`./src/packages`);
mkdirsSync(`./src/styles`);
复制代码

/** package.json **/
  "scripts": {
    ...
    "add":"node ./auto/addComponent/add.js"
  }
复制代码

/** page/index.js **/
exports.indexPage = function (componentsName) {
  return `
import ${componentsName.charAt(0).toUpperCase() + componentsName.slice(1)} from './${componentsName}.vue';
export default ${componentsName.charAt(0).toUpperCase() + componentsName.slice(1)};
  `;
};
exports.vuePage = function (componentsName) {
  return `
<template>
    <div class="${componentsName}">
    </div>
</template>
<script>
export default {
  name: '${componentsName}',
  data(){
    return{}
  }
}
</script>
  `;
};
exports.stylePage = function () {
  return `
@charset "UTF-8";
@import "common/var";
@import "mixins/mixins";
  `;
};
复制代码

/** add.js **/
...
const configData = require("./data");
...
//遍历配置文件并调用创建目录方法
configData.data.forEach((item) => {
  if(item.folder){
      mkdirsSync(`./src/packages/${item.folder}`);
  }
});
复制代码

/** add.js **/
...
//引入文件模板
let componentsPage = require("../page/index");
// index模板
let indexPage = componentsPage.indexPage;
//vue模板
let vuePage = componentsPage.vuePage;
//style模板
let stylePage = componentsPage.stylePage;
...
//遍历配置文件创建index、vue、style文件
configData.data.forEach((item) => {
    if(item.componentsName){
        let indexPath=`./src/packages/${item.folder}/index.js`;
        let vuePath=`./src/packages/${item.folder}/${item.componentsName}.vue`;
        let stylePath=`./src/styles/${item.componentsName}.scss`;
        let name=item.componentsName;
        //创建index.js文件
        if (fs.existsSync(indexPath)) {
            console.log(indexPath+'已存在');
        }else{
            fs.writeFile(indexPath, indexPage(name), function(err){
                if(err){
                    return console.log('创建index文件失败', err);
                }
                console.log(`创建index文件成功！-${name}.js`);
            });
        }
        //创建组件vue文件
        if (fs.existsSync(vuePath)) {
            console.log(vuePath+'已存在');
        }else{
            fs.writeFile(vuePath, vuePage(name), function(err){
                if(err){
                    return console.log('创建vue文件失败', err);
                }
                console.log(`创建vue文件成功！-${name}.vue`);
            });
        }
        //创建组件style文件
        if (fs.existsSync(stylePath)) {
            console.log(stylePath+'已存在');
        }else{
            fs.writeFile(stylePath, stylePage(), function(err){
                if(err){
                    return console.log('创建style文件失败', err);
                }
                console.log(`创建style文件成功！-${name}.scss`);
            });
        }
    }
});
复制代码

/** add.js **/
...
//一个覆盖index.scss的方法
function dealIndexStyle(){
    let file='';
    configData.data.forEach((item) => {
        //遍历所有组件引入每个组件样式 例如：@import "button";
        let name=item.componentsName; //首字母大写
        file+=`@import "${name}";\n`;
    });
    fs.writeFile(`./src/styles/index.scss`,file,function(err){
        if(err){
            return console.log('主样式文件引入scss失败', err);
        }else{
            console.log('主样式文件引入scss成功');
        }
    });
}
dealIndexStyle();
复制代码

/** addComponents.js **/
import xxx from 'xxx';
const allComponents ={
lxxx: xxx,
};
export default allComponents;
复制代码

/** add.js **/
...
//遍历配置文件获取对应组件拼装组件初始化
function addComponentsList(){
    let file='';
    let allComponents='';
    configData.data.forEach((item) => {
        //遍历所有组件每个组件添加依赖 例如：import Button from './packages/button';
        let name=item.componentsName.charAt(0).toUpperCase() + item.componentsName.slice(1); //首字母大写
        file+=`import ${name} from './packages/${item.componentsName}';\n`;
    });
    configData.data.forEach((item) => {
        //遍历所有组件每个组件添加   例如：lButton: Button,
        let name=item.componentsName.charAt(0).toUpperCase() + item.componentsName.slice(1); //首字母大写
        allComponents+=`l${name}: ${name},\n`;
    });
    file +=`const allComponents ={\n${allComponents}};\nexport default allComponents;`;
    //写入组件列表
    fs.writeFile(`./src/addComponents.js`,file,function(err){
        if(err){
            return console.log('写入组件列表失败', err);
        }else{
            console.log('写入组件列表成功');
            console.log('结束创建文件');
            console.log('>>>>>>>>>>>>>');
        }
    });
}
addComponentsList();
复制代码