Xiaoxu UI 组件库

Xiaoxu UI - 基于 Vue 3 构建的现代化企业级 UI 组件库。

特性

• 🚀 基于 Vue 3 Composition API
• 📦 支持按需引入
• 🎨 主题定制
• 💪 完整的 TypeScript 支持
• 📱 响应式设计

安装

npm install xiaoxu-ui
# 或
yarn add xiaoxu-ui
# 或
pnpm add xiaoxu-ui

快速开始

全局引入

import { createApp } from 'vue'
import XiaoxuUI from 'xiaoxu-ui'
import 'xiaoxu-ui/style.css'

const app = createApp(App)
app.use(XiaoxuUI)

按需引入

import { XButton, XTable, XForm } from 'xiaoxu-ui'
import 'xiaoxu-ui/style.css'

// 在组件中使用
export default {
  components: {
    XButton,
    XTable,
    XForm
  }
}

组件列表

• 基础组件

  • X-Button - 按钮
  • X-Icon - 图标
  • X-Tag - 标签

• 表单组件

  • X-Form - 表单
  • X-FormItem - 表单项
  • X-Input - 输入框
  • X-Select - 选择器
  • X-Cascader - 级联选择器
  • X-Switch - 开关
  • X-Checkbox - 多选框
  • X-CheckboxGroup - 多选框组
  • X-Radio - 单选框
  • X-RadioGroup - 单选框组

• 数据展示

  • X-Table - 表格
  • X-TableColumn - 表格列
  • X-Card - 卡片
  • X-Steps - 步骤条

• 反馈组件

  • X-Dialog - 对话框
  • X-Message - 消息提示
  • X-Loading - 加载

全局 API

Message 消息提示

import { Message } from 'xiaoxu-ui'

// 或在 Vue 应用中
app.config.globalProperties.$message.success('操作成功')

Loading 加载

// 使用指令
<div v-loading="isLoading">内容</div>

// 使用 API
import { Loading } from 'xiaoxu-ui'
const loading = Loading.service({ text: '加载中...' })
loading.close()

主题定制

组件库使用 CSS 变量实现主题定制，可以通过覆盖 CSS 变量来自定义主题：

:root {
  --color-primary: #128cff;
  --color-success: #67c23a;
  --color-warning: #e6a23c;
  --color-danger: #f56c6c;
  --color-info: #909399;
}

TypeScript 支持

组件库提供完整的 TypeScript 类型定义：

import type { XButtonProps, XTableProps } from 'xiaoxu-ui'

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建组件库
npm run build:lib

浏览器兼容性

• 现代浏览器
• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

更新日志

v0.1.0 (2025-07-18)

🎉 首次发布

• 新增 20+ 基础组件
• 完整的 TypeScript 支持
• 支持按需引入
• 提供 ES Module 和 UMD 两种构建版本
• 完善的文档和示例

贡献指南

欢迎贡献代码！请先阅读我们的贡献指南。

问题反馈

• 通过 GitHub Issues 报告问题
• 加入讨论群获取帮助

许可证

MIT © 2025 Xiaoxu UI Team