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 自主打造一个简单的组件库。你可以根据需求不断添加更多的组件，并进行优化和扩展。
