xia仔ke：quangneng.com/3674/

使用 Vue 3.3 和 TypeScript 4 自主打造媲美 ElementPlus 的组件库

在现代前端开发中，组件库是构建高效、可维护应用的关键工具。ElementPlus 是一个流行的 Vue 3 组件库，但如果你想定制自己的 UI 组件库来满足特定需求，或者希望提升对组件库内部工作原理的理解，可以尝试自主打造一个。本文将带你通过使用 Vue 3.3 和 TypeScript 4 创建一个高质量的组件库。

1. 项目概述

我们将创建一个组件库，包含以下功能：

• 支持 Vue 3 的新特性，如 Composition API 和 Teleport。
• 使用 TypeScript 提供类型安全和开发支持。
• 提供基本的 UI 组件，例如 Button、Input 和 Modal。

2. 项目设置

2.1 初始化项目

首先，我们需要初始化一个新的 Vue 3 项目，并安装相关依赖：

bashmkdir my-component-library
cd my-component-library
npm init -y
npm install vue@next typescript ts-node @types/node @vue/compiler-sfc --save
npm install --save-dev vite @vitejs/plugin-vue @types/vite

创建 TypeScript 配置文件 tsconfig.json：

json{
  "compilerOptions": {
    "target": "es6",
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": "./src",
    "paths": {
      "@/*": ["*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules"]
}

2.2 配置 Vite

在项目根目录创建 vite.config.ts 文件：

typescriptimport { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyComponentLibrary',
      fileName: (format) => `my-component-library.${format}.js`,
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
});

3. 开发组件库

3.1 组织目录结构

项目目录结构如下：

my-component-library/
├── src/
│   ├── components/
│   │   ├── Button.vue
│   │   ├── Input.vue
│   │   ├── Modal.vue
│   ├── index.ts
├── package.json
├── tsconfig.json
├── vite.config.ts

3.2 编写组件

Button 组件

src/components/Button.vue：

<template>
  <button :class="['btn', typeClass]" :disabled="disabled">
    <slot></slot>
  </button>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps<{
  type?: 'primary' | 'secondary';
  disabled?: boolean;
}>();

const typeClass = computed(() => {
  return props.type === 'primary' ? 'btn-primary' : 'btn-secondary';
});
</script>

<style scoped>
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.btn-primary {
  background-color: #007bff;
  color: white;
}
.btn-secondary {
  background-color: #6c757d;
  color: white;
}
</style>

Input 组件

src/components/Input.vue：

<template>
  <input :class="['input', sizeClass]" :type="type" :placeholder="placeholder" />
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps<{
  type?: 'text' | 'password';
  placeholder?: string;
  size?: 'small' | 'medium' | 'large';
}>();

const sizeClass = computed(() => {
  return props.size === 'large' ? 'input-large' : props.size === 'small' ? 'input-small' : '';
});
</script>

<style scoped>
.input {
  padding: 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
.input-large {
  font-size: 1.25rem;
}
.input-small {
  font-size: 0.875rem;
}
</style>

Modal 组件

src/components/Modal.vue：

<template>
  <div v-if="visible" class="modal-overlay">
    <div class="modal-content">
      <button class="close" @click="close">X</button>
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps<{
  visible: boolean;
}>();

const emit = defineEmits<{ (event: 'update:visible', value: boolean): void }>();

const close = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  background: white;
  padding: 16px;
  border-radius: 4px;
  position: relative;
}
.close {
  position: absolute;
  top: 8px;
  right: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
}
</style>

3.3 导出组件

在 src/index.ts 中导出组件：

typescriptimport Button from './components/Button.vue';
import Input from './components/Input.vue';
import Modal from './components/Modal.vue';

export { Button, Input, Modal };

4. 组件库测试

4.1 本地测试

在本地进行组件测试，你可以使用 Vite 的开发服务器：

bashnpm run dev

4.2 发布到 npm

在发布之前，确保在 package.json 中配置了合适的入口文件和包名：

json{
  "name": "my-component-library",
  "version": "1.0.0",
  "main": "dist/my-component-library.umd.js",
  "module": "dist/my-component-library.es.js",
  "types": "dist/my-component-library.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "build": "vite build"
  }
}

然后构建项目并发布到 npm：

bashnpm run build
npm publish

5. 使用组件库

在 Vue 3 项目中安装并使用组件库：

bashnpm install my-component-library

在项目中导入并使用组件：

typescriptimport { createApp } from 'vue';
import App from './App.vue';
import { Button, Input, Modal } from 'my-component-library';

const app = createApp(App);
app.component('Button', Button);
app.component('Input', Input);
app.component('Modal', Modal);
app.mount('#app');

示例组件使用

<template>
  <div>
    <Button type="primary">Primary Button</Button>
    <Input size="large" placeholder="Enter text" />
    <Modal :visible="modalVisible" @update:visible="modalVisible = $event">
      <p>This is a modal</p>
    </Modal>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const modalVisible = ref(false);
</script>

6. 总结

通过本文，你已经学会了如何使用 Vue 3.3 和 TypeScript 4 自主打造一个媲美 ElementPlus 的高质量组件库。我们从初始化项目、开发组件到发布和使用，详细介绍了整个过程。这个组件库的创建不仅能提升你的前端开发技能，也能帮助你更好地理解 Vue 和 TypeScript 的应用。希望这能为你的前端开发之旅提供有力的支持。