eb-component-vue

基于 Element Plus 的 Vue 3 组件库，提供了更高级的组件和更便捷的开发体验。

特性

• 🚀 基于 Vue 3 和 Element Plus
• 💪 使用 TypeScript 开发，提供完整的类型定义
• 🎨 支持主题定制，提供丰富的 CSS 变量
• 📦 支持按需引入
• 🔧 提供完整的文档和示例
• ✨ 提供更高级的组件封装

安装

# NPM
npm install eb-component-vue element-plus @element-plus/icons-vue

# Yarn
yarn add eb-component-vue element-plus @element-plus/icons-vue

# PNPM
pnpm add eb-component-vue element-plus @element-plus/icons-vue

快速开始

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import EbComponentVue from 'eb-component-vue'
import 'element-plus/dist/index.css'
import 'eb-component-vue/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.use(EbComponentVue)
app.mount('#app')

<!-- App.vue -->
<template>
  <eb-pro-form
    v-model="formData"
    :schemas="schemas"
    label-width="100px"
    @submit="handleSubmit"
  />
</template>

<script setup lang="ts">
import type { ProFormSchema } from 'eb-component-vue'

const formData = ref({})
const schemas: ProFormSchema[] = [
  {
    field: 'name',
    label: '姓名',
    component: 'input',
    rules: [{ required: true, message: '请输入姓名' }]
  },
  {
    field: 'age',
    label: '年龄',
    component: 'input-number',
    componentProps: {
      min: 0,
      max: 100
    }
  }
]

const handleSubmit = (values: Record<string, unknown>) => {
  console.log('表单提交:', values)
}
</script>

组件列表

• ProForm - 高级表单组件

开发指南

环境准备

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建组件库
pnpm build

# 运行测试
pnpm test

# 构建文档
pnpm docs:build

目录结构

├── docs/               # 文档
├── src/               # 源码
│   ├── components/    # 组件
│   ├── hooks/         # Hooks
│   └── utils/         # 工具函数
├── play/              # 开发调试
├── scripts/           # 构建脚本
├── types/             # 类型定义
└── package.json

开发规范

1. 组件开发

   • 使用 TypeScript 开发
   • 使用 Composition API
   • 提供完整的类型定义
   • 编写单元测试
   • 提供详细文档

2. 代码风格

   • 使用 ESLint 和 Prettier
   • 遵循 Vue 3 推荐的代码风格
   • 使用 TypeScript 严格模式

3. Git 提交规范

   • feat: 新功能
   • fix: 修复
   • docs: 文档更新
   • style: 代码格式
   • refactor: 重构
   • test: 测试
   • chore: 构建过程或辅助工具的变动

贡献指南

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的改动 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 提交 Pull Request

许可证

MIT