项目的目录结构

首先创建一个空项目，

1
2
npm create vue@lastest
npm i

然后把components从src中挪到根目录下，把src改名为examples，修改index.html中main.ts的路径。
具体的项目结构如下所示：

  • components
  • examples
  • node_modules
  • public
  • index.html
  • package.json
  • vite.config.ts

导出组件

在components/index.ts中定义导出的组件。
以下代码是导出单个组件，

1
2
3
4
5
6
7
8
9
10
11
12
// components/index.ts
import { App } from 'vue';
import MyButton from './Button';

const MyButtonPlugin = {
  install: (app: App) => {
    app.component('MyButton', MyButton);
  }
}


export default MyButtonPlugin;

如果有多个组件需要导出，

1
2
3
4
5
6
7
8
9
10
11
12
// components/Button/index.ts
import { App } from 'vue';
import MyButton from './Button';

const MyButtonPlugin = {
  install: (app: App) => {
    app.component('MyButton', MyButton);
  }
}


export default MyButtonPlugin;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// components/index.ts
import MyButton from "./Button";
import MyTable from "./Table";

const components: any = {
  MyButton,
  MyTable,
};

const MyUI = {
  install: (Vue: App) => {
    Object.keys(components).forEach((key) => {
      Vue.use(components[key]);
    });
  },
};

// 导出多个组件，方便按需引入
export { MyButton, MyTable };

// 全部导出
export default MyUI;

app.use用来安装插件，插件可以是具有install方法的对象，也可以是当作install方法的函数。

引入组件

在examples/main.ts中使用app.use来安装插件，然后就可以全局使用了。

1
2
3
4
5
// 整个引入
import MyUI from '../components';

const app = createApp(App);
app.use(MyUI);
1
2
3
4
5
// 按需引入
import { MyButton } from '../components';

const app = createApp(App);
app.use(MyButton);
1
2
// App.vue
<my-button />

打包组件库

首先修改package.json文件，去掉private字段，添加main字段，files字段，

1
2
3
4
5
"main": "dist/index.umd.js",
"files": [
    "dist",
    "components"
  ],

然后修改vite.config.ts配置，

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
build: {
    lib: {
      entry: path.resolve(__dirname, "components"),
      name: "MyUI",
      fileName: (format, fileName) => `${fileName}.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },

测试打包后的文件:

1
2
3
4
5
// main.ts
import test from '../dist/index.es.js';
import '../dist/style.css';

app.use(test);

发布库

如果没有npm账号需要先注册一下。
如果npm源不是默认源，需要修改为默认源。

1
2
npm login
npm publish

注：每次push的时候都要修改package.json中的version。