基于vue2.x搭建组件库的流程-（二）-新组件文件的初始化

上篇文章已经讲解了从零开始搭建一个组件库到发布npm，基于vue2.x搭建组件库的流程_笑道三千的博客-CSDN博客，然后第三方开发者下载使用的基本流程。

这篇文章主要优化下组件库的开发之一：组件的自动初始化。

在开发一个组件之前，需要创建组件目录、创建组件文件、初始化组件模板等一系列繁琐又重复的工作，这些其实都可以使用脚本自动化实现。

1，配置package.json

可以在 scripts 目录下写一个 node 脚本实现以上过程，并在 package.json 中添加 scripts 脚本加入到 npm 工作流中：

  "scripts": {
    "create": "node ./script/new-file.js"
  },

2，编写模板文件

因为这里我是用来搭建组件的，所以只有两个模板文件，一个是基础的vue模板，另一个则是index.js导出文件。

新建文件script/template/index.vue:

<template>
  <div>模板</div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="scss" scoped></style>

新建文件script/template/index.js:

// 导入组件，组件必须声明 name
import BiuLoading from "./src";

// 为组件提供 install 安装方法，供按需引入
BiuLoading.install = function (Vue) {
  Vue.component(BiuLoading.name, BiuLoading);
};

// 导出组件
export default BiuLoading;

3，编写自动化创建组件的脚本：

script/new-file.js：

const path = require("path");
const fs = require("fs");
const fileSave = require("file-save");
const uppercamelcase = require("uppercamelcase");
const inquirer = require("inquirer");
//组件放置在src/components下，组件名文件夹加一个index.vue文件
//组件的命名规范为大驼峰:MyTest

let data1, data2;
fs.readFile(
  path.resolve(__dirname, "./template/index.vue"),
  "utf8",
  async function (err, data) {
    data1 = data;
  }
);
fs.readFile(
  path.resolve(__dirname, "./template/index.js"),
  "utf8",
  async function (err, data) {
    data2 = data;
  }
);
const build = async () => {
  const res2 = await inquirer.prompt([
    {
      type: "input",
      message: "请输入组件名称:",
      name: "componentName",
    },
  ]);
  const ComponentName = uppercamelcase(res2.componentName);
  const componentPath = path.resolve(__dirname, "../packages", ComponentName);
  const files = [
    { fileName: "index.js", content: data2 },
    { fileName: "src/index.vue", content: data1 },
  ];
  files.forEach((file) => {
    fileSave(path.join(componentPath, file.fileName)).write(
      file.content,
      "utf8"
    );
  });
};
build();

4，使用自动化脚本

在上面三个步骤创建好之后，只需要npm run create输入对应的组件名，就可以自动创建新的组件模板了。