一、框架介绍

1. lerna

Lerna 是一个管理工具，用于管理包含多个软件包（package）的 JavaScript 项目。

目的是将大型代码仓库分割成多个独立版本化的软件包。
官网点这里

2. rollup

Rollup 是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。

官网点这里

二、项目准备

1. 新建项目

首先你需要创建一个vue项目，我这里以vue3为例，初始化项目目录大概是下面这样的：
在这里插入图片描述

2. 改造一些目录：

# 创建目录 packages
mkdir packages

# 文件夹重命名 
mv src  examples

目录变成酱紫：
在这里插入图片描述
examples 目录用于存放示例代码；
packages 目录用于存放组件库代码；

注意修改src目录相关的代码即可，这里不做赘述

三、编写组件

在packages目录下创建自己的组件，结构可参考：
在这里插入图片描述
以my-table为例：
packages/my-table/src/main.vue，自定义的vue组件

<template>
  <h2>表格组件</h2>
  <table border style="border-collapse: collapse">
    <tr>
      <th>000</th>
      <th>000</th>
      <th>000</th>
      <th>000</th>
    </tr>
    <tr>
      <td>111</td>
      <td>111</td>
      <td>111</td>
      <td>111</td>
    </tr>
    <tr>
      <td>222</td>
      <td>222</td>
      <td>222</td>
      <td>222</td>
    </tr>
    <tr>
      <td>333</td>
      <td>333</td>
      <td>333</td>
      <td>333</td>
    </tr>
  </table>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "my-table",
  mounted() {
    console.log("my-table 初始化");
  },
});
</script>

packages/my-table/index.js，主要就是为了引入src中的vue组件

import MyTable from "./src/main.vue";

MyTable.install = function (Vue) {
  Vue.component(MyTable.name, MyTable);
};

export default MyTable;

四、测试组件

为了后面的步骤顺利进行，先对我们创建好的组件进行一下简单的测试；
examples/main.ts

import { createApp } from 'vue'
import App from './App.vue'

import MyTable from "../packages/my-table"
import MyInput from "../packages/my-input"

import './assets/main.css'

createApp(App).use(MyTable).use(MyInput).mount('#app')

examples/App.vue

<template>
  <main>
    <my-table></my-table>
    <my-input></my-input>
  </main>
</template>

运行项目，看到如下效果，可真是谢天谢地了
在这里插入图片描述
到这里，说明我们封装的组件库（勉强这么称呼吧）已经可以正常使用了，接下来就是打包、发布了。

五、打包

多个组件库分别创建 package.json，用于管理各自的打包命令、依赖等。

cd packages/mytable && npm init -y

cd packages/my-input && npm init -y

1. 安装rollup相关依赖

yarn add rollup rollup-plugin-vue -D

多个组件库分别创建rollup配置文件，并添加配置
packages/my-table/rollup.config.js

import vue from "rollup-plugin-vue";

export default {
  input: "./index.js",
  output: [
    {
      file: "dist/index.js",
      format: "es",
    },
  ],
  plugins: [vue()],
};

2. 修改根目录下package.json

修改根目录下的package.json中的打包命令，并指定工作空间为 packages 目录

{
  "scripts": {
    "build": "yarn workspaces run build",
    ...
  },
  "workspaces": [
    "packages/*"
  ],
  "private": true,
  ...
}

3. 修改各组件库package.json

修改各组件库的package.json中的打包命令，可根据自己需要，修改其他属性。本示例修改了type和main：

{
  "type": "module",
  "main": "./dist/index.js",
  "scripts": {
    "build": "rollup -c"
  },
  ...
}

4. 执行打包命令

在根目录执行打包命令

yarn build

不出意外的话，在各自的组件库目录中会多了一个dist目录，这就是我们根据rollup配置文件打包的结果。

接下来修改 examples/main.ts 中的引用路径，验证一下打包后的组件。

import { createApp } from 'vue'
import App from './App.vue'

// import MyTable from "../packages/my-table"
// import MyInput from "../packages/my-input"
import MyTable from "../packages/my-table/dist/index.js"
import MyInput from "../packages/my-input/dist/index.js"

import './assets/main.css'

createApp(App).use(MyTable).use(MyInput).mount('#app')