使用 Vite 搭建组件库：以 vcolorpicker 为例

2023-09-07 06:04:08

在组件化开发盛行的今天，构建一个独立的组件库可以极大地提高开发效率和复用性。本文将以一款出色的颜色选择器组件 vcolorpicker 为例，带你一步步构建一个基于 Vue 3 + Vite 的组件库，并涵盖从开发到发布到 npm 的完整流程。

1. 创建项目

首先，使用 Vite 脚手架创建一个新的项目：

npx vite create vcolorpicker

2. 安装依赖

安装必要的依赖：

npm install vcolorpicker --save

3. 创建组件

在 src/components 目录下创建 VColorPicker.vue 文件：

<template>
  <div class="v-color-picker">
    <input type="color" v-model="color" />
  </div>
</template>

<script>
export default {
  name: 'VColorPicker',
  props: ['color'],
  emits: ['update:color'],
};
</script>

4. 编写测试

在 tests/unit 目录下创建 VColorPicker.spec.js 文件：

import { mount } from '@vue/test-utils';
import VColorPicker from '@/components/VColorPicker.vue';

describe('VColorPicker', () => {
  it('should emit an update event when the color changes', () => {
    const wrapper = mount(VColorPicker);
    const input = wrapper.find('input[type="color"]');
    input.trigger('input', { target: { value: '#FF0000' } });
    expect(wrapper.emitted('update:color')).toBeTruthy();
  });
});

5. 构建组件库

在 vite.config.js 中添加以下配置：

export default defineConfig({
  build: {
    lib: {
      entry: 'src/lib.js',
      name: 'vcolorpicker',
      fileName: 'index',
    },
    rollupOptions: {
      // ...
      output: {
        // ...
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});