资源描述
X-M-UI 是一个面向 Vue 3 的轻量级、可定制 UI 组件库，提供按钮、表单、布局、图标、弹窗等常用组件及响应式样式系统。专为中后台管理系统快速开发设计，支持按需引入与主题定制，兼顾开发效率与性能表现，适合 Vue 3 + Vite/webpack 项目集成。
详细内容
## X-M-UI 框架简介与定位
X-M-UI 是一款基于 Vue 3（Composition API）构建的现代化 UI 组件库，由 MonW3C 团队维护。它聚焦于简洁性、可访问性与工程友好性，不依赖第三方 UI 框架（如 Element Plus 或 Ant Design Vue），采用纯 CSS-in-JS（CSS Modules）与语义化类名设计，强调零运行时依赖、低 bundle 体积与高可定制能力，适用于企业级中后台系统、内部工具平台及快速原型项目。
## 核心特性
- ✅ **Vue 3 原生支持**：完全基于 Composition API 开发，兼容 `<script setup>` 语法与 TypeScript 类型定义。
- ✅ **按需引入机制**：通过 `unplugin-vue-components` 或手动导入方式支持组件级加载，避免全量打包。
- ✅ **响应式布局系统**：内置栅格（Grid）、间距（Spacing）、断点（Breakpoints）等基础布局工具，适配 PC 与平板端。
- ✅ **主题定制能力**：提供 SCSS 变量入口（如 `$primary-color`, `$border-radius`），支持编译时主题覆盖与 CSS 自定义属性（CSS Custom Properties）动态切换。
- ✅ **无障碍（a11y）增强**：关键组件（如 `XButton`, `XSelect`, `XModal`）默认遵循 WAI-ARIA 规范，支持键盘导航与屏幕阅读器识别。
## 适用场景
- Vue 3 中后台管理系统的快速搭建（如 CRM、ERP、监控看板）
- 需要轻量级 UI 层且不希望引入大型框架的内部工具项目
- 对首屏加载性能敏感、要求组件体积可控的 PWA 或嵌入式 Web 应用
- 团队已有设计语言体系，需基于 X-M-UI 进行二次定制与扩展
## 快速入门步骤
1. **安装**（推荐使用 npm）：
```bash
npm install x-m-ui
```
2. **在 `main.ts` 中全局注册（可选）或按需导入**：
```ts
import { createApp } from 'vue'
import App from './App.vue'
import { XButton, XCard } from 'x-m-ui'
import 'x-m-ui/dist/style.css' // 引入基础样式
const app = createApp(App)
app.component('XButton', XButton)
app.component('XCard', XCard)
app.mount('#app')
```
3. **最小示例（App.vue）**：
```vue
<template>
<XButton type="primary">提交</XButton>
<XCard title="数据概览">
<p>当前在线用户：1,248</p>
</XCard>
</template>
```
## 生态与社区说明
X-M-UI 文档托管于 GitHub Pages（https://monw3c.github.io/xmui/），源码开源在 GitHub（仓库名：`monw3c/xmui`），目前由核心维护者持续迭代，暂未接入官方 Vue 插件市场或 NPM 官方组织，但已通过社区反馈机制（GitHub Issues）支持 Bug 报告与功能建议。项目遵循 MIT 协议，欢迎 PR 提交组件优化、文档补全与国际化支持。