Vue3+TS组件库开发指南

2023-11-15 07:24:08

前言

随着前端项目的日益复杂，组件化开发成为了构建和维护前端项目的必要手段。组件库作为一种预先构建好的组件集合，可以帮助开发者快速搭建复杂的界面，提高开发效率和代码质量。

本文将手把手教你使用 Vue3.0 + TypeScript 开发一套组件库，并将其发布到 npm 仓库。教程涵盖组件开发、单元测试、构建和发布等各个环节，循序渐进，易于理解。无论是前端开发新手还是经验丰富的开发者，都可以从中学到很多有用的知识。

准备工作

在开始开发组件库之前，你需要确保已经安装了以下工具：

Node.js 16.0 或更高版本
npm 或 yarn
Vue CLI 4.0 或更高版本

项目初始化

首先，使用 Vue CLI 创建一个新的项目：

vue create my-component-library

选择 Manually select features，然后勾选 TypeScript 和 Babel。

安装依赖项：

cd my-component-library
npm install

组件开发

接下来，让我们创建一个简单的组件。在 src/components 目录下创建一个新的文件 Button.vue：

<template>
  <button>
    <slot></slot>
  </button>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Button',
});
</script>

这是一个简单的按钮组件。它有一个默认的插槽，允许你在按钮内部插入任何内容。

单元测试

为了确保组件的正确性，我们需要编写单元测试。在 src/__tests__ 目录下创建一个新的文件 Button.spec.ts：

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

describe('Button', () => {
  it('should render correctly', () => {
    const wrapper = mount(Button);
    expect(wrapper.html()).toMatchSnapshot();
  });

  it('should emit click event', () => {
    const wrapper = mount(Button);
    wrapper.find('button').trigger('click');
    expect(wrapper.emitted('click')).toBeTruthy();
  });
});