Z-UI-Vue3

基于 ant-design-vue 4.2.6 的 Vue 3 组件库，组件前缀从 a- 改为 z-，保持完全兼容的 API。

✨ 特性

• 🎨 42个组件 - 涵盖通用、布局、导航、数据录入、数据展示、反馈等分类
• 🔧 完全兼容 - 100% 兼容 ant-design-vue API
• 💪 TypeScript - 完整的类型定义支持
• 📦 按需加载 - 支持 ES Module 和 CommonJS
• 🎯 现代化 - 基于 Vue 3 Composition API
• 🌈 UnoCSS - 集成原子化 CSS 框架
• 📖 文档完善 - VitePress 构建的文档站点

📦 安装

npm install z-ui-vue3 ant-design-vue
# 或
yarn add z-ui-vue3 ant-design-vue
# 或
pnpm add z-ui-vue3 ant-design-vue

🚀 快速开始

完整引入

import { createApp } from 'vue'
import ZUI from 'z-ui-vue3'
import 'ant-design-vue/dist/reset.css'

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

按需引入

import { ZButton, ZInput } from 'z-ui-vue3'

// 在组件中使用
export default {
  components: {
    ZButton,
    ZInput
  }
}

在模板中使用

<template>
  <div>
    <z-button type="primary">主要按钮</z-button>
    <z-input placeholder="请输入内容" />
  </div>
</template>

🎯 组件列表

🔧 通用组件 (2个)

• ZButton - 按钮
• ZAvatar - 头像

📐 布局组件 (2个)

• ZCollapse / ZCollapsePanel - 折叠面板

🧭 导航组件 (8个)

• ZBreadcrumb / ZBreadcrumbItem - 面包屑
• ZDropdown - 下拉菜单
• ZMenu / ZMenuItem - 导航菜单
• ZPagination - 分页
• ZSteps / ZStep - 步骤条

📝 数据录入组件 (14个)

• ZInput - 输入框
• ZInputNumber - 数字输入框
• ZSelect / ZSelectOption - 选择器
• ZCascader - 级联选择
• ZSwitch - 开关
• ZCheckbox - 复选框
• ZRadio / ZRadioGroup - 单选框
• ZDatePicker - 日期选择器
• ZTimePicker - 时间选择器
• ZUpload - 文件上传
• ZForm / ZFormItem - 表单

📊 数据展示组件 (9个)

• ZBadge - 徽章
• ZTag - 标签
• ZEmpty - 空状态
• ZSkeleton - 骨架屏
• ZTabs / ZTabPane - 选项卡
• ZTree - 树形控件
• ZTable - 表格

💬 反馈组件 (7个)

• ZAlert - 警告提示
• ZSpin - 加载中
• ZPopover - 气泡卡片
• ZTooltip - 文字提示
• ZModal - 对话框
• ZDrawer - 抽屉
• ZResult - 结果页

📖 文档

运行文档站点：

npm run docs:dev

🔨 开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build

# 类型检查
npm run type-check

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License

🙏 致谢

• ant-design-vue - 优秀的 Vue 3 UI 组件库
• Vue 3 - 渐进式 JavaScript 框架
• Vite - 下一代前端构建工具