Vue3.3 + TS4，自主打造媲美 ElementPlus 的组件库(无秘分享)

1. 项目初始化

首先，我们需要创建一个基于 Vite 的 Vue 3 + TypeScript 项目。 bash

perl
代码解读
复制代码
npm init vite@latest my-component-library -- --template vue-ts cd my-component-library

2. 项目结构搭建

Vue3.3 + TS4 ，自主打造媲美 ElementPlus 的组件库(完结)_超星it

为了更好地组织代码，我们可以按照以下结构来搭建项目： plaintext

css
代码解读
复制代码
my-component-library/ ├── src/ │   ├── components/  # 组件目录 │   │   ├── Button/  # 示例组件 │   │   │   ├── Button.vue │   │   │   ├── index.ts │   ├── index.ts     # 组件库入口文件 ├── vite.config.ts   # Vite 配置文件 ├── package.json     # 项目依赖和脚本配置

3. 配置 Vite

在 vite.config.ts 中进行一些基本的配置，例如别名配置和构建配置： typescript

javascript
代码解读
复制代码
import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; export default defineConfig({   plugins: [vue()],   resolve: {     alias: {       '@': path.resolve(__dirname, 'src'),     },   },   build: {     lib: {       entry: path.resolve(__dirname, 'src/index.ts'),       name: 'MyComponentLibrary',       fileName: (format) => `my-component-library.${format}.js`,     },     rollupOptions: {       external: ['vue'],       output: {         globals: {           vue: 'Vue',         },       },     },   }, });

4. 创建组件

以创建一个简单的按钮组件为例：

src/components/Button/Button.vue

vue

xml
代码解读
复制代码
<template>   <button :class="['my-button', { 'my-button--primary': type === 'primary' }]" @click="handleClick">     <slot></slot>   </button> </template> <script setup> import { defineProps, defineEmits } from 'vue'; const props = defineProps<{   type?: 'primary' | 'default'; }>(); const emits = defineEmits(['click']); const handleClick = () => {   emits('click'); }; </script> <style scoped> .my-button {   padding: 8px 16px;   border: none;   cursor: pointer; } .my-button--primary {   background-color: #007bff;   color: white; } </style>

src/components/Button/index.ts

typescript

css
代码解读
复制代码
import { App } from 'vue'; import Button from './Button.vue'; // 定义 install 方法，用于 Vue.use() 安装组件 Button.install = (app: App) => {   app.component('MyButton', Button); }; export default Button;

5. 组件库入口文件

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

javascript
代码解读
复制代码
import { App } from 'vue'; import Button from './components/Button'; const components = [Button]; const install = (app: App) => {   components.forEach((component) => {     app.use(component);   }); }; export { Button }; export default {   install, };

6. 开发环境测试

在 src/App.vue 中测试组件： vue

xml
代码解读
复制代码
<template>   <div>     <MyButton @click="handleClick">点击我</MyButton>     <MyButton type="primary" @click="handleClick">主要按钮</MyButton>   </div> </template> <script setup> const handleClick = () => {   console.log('按钮被点击了'); }; </script>

7. 构建和发布

运行以下命令进行构建： bash

arduino
代码解读
复制代码
npm run build

构建完成后，会在 dist 目录下生成组件库的文件。你可以将其发布到 npm 上供他人使用。

8. 文档和测试

• 文档：使用工具如 VitePress 或 Storybook 来为组件库生成文档，方便用户了解组件的使用方法和属性。
• 测试：使用 Vitest 或 Jest 等测试框架对组件进行单元测试，确保组件的稳定性和可靠性。

通过以上步骤，你就可以使用 Vue 3.3 和 TypeScript 4 自主打造一个简单的组件库。你可以根据需求不断添加更多的组件，并进行优化和扩展。