@macroui/macroui-vue

v2.7.25

Published

9 hours ago

基于 Vue 3 + MacroUI 兼容 Element Plus API 风格的组件库

0High
0Medium
0Low

mobiui

vue vue3 element-plus daisyui ui components ui-library typescript tailwindcss i18n internationalization

@macroui/macroui-vue

基于 Vue 3 + Element Plus API + DaisyUI 视觉风格的组件库

@macroui/macroui-vue 是一个开源的 Vue 3 组件库，提供了与 Element Plus 一致的 API 体验，同时采用 DaisyUI 的视觉风格和 Tailwind CSS 的设计系统。覆盖 90+ 常用组件，支持 27 种 DaisyUI 主题，原生 TypeScript 支持。

✨ 特性

🎨 DaisyUI 视觉风格 — 集成 27 种主题（light / dark / corporate / business / dracula / synthwave ...）
📦 Element Plus 兼容 API — 熟悉的 ElButton ElTable ElForm 等组件名与 props
🧩 90+ 组件 — 表单、数据展示、反馈、容器、导航、布局全覆盖
🌐 多语言 (i18n) — 内置简体中文、English，支持自定义扩展
🛠 TypeScript 优先 — 完整类型定义，支持 TSX
⚡ 按需引入 — 支持全量注册和具名导入
🎯 Vue 3 Composition API — 完全基于 <script setup> 风格开发

📦 安装

# npm
npm install @macroui/macroui-vue @macroui/macroui @macroui/macroui-icons vue

# pnpm
pnpm add @macroui/macroui-vue @macroui/macroui @macroui/macroui-icons vue

# yarn
yarn add @macroui/macroui-vue @macroui/macroui @macroui/macroui-icons vue

vue 是 peerDependency，需要在项目中显式安装。

🚀 快速开始

// main.ts
import { createApp } from 'vue'
import { ElButton, ElInput, ElTable, ElTableColumn } from '@macroui/macroui-vue'
import App from './App.vue'

// 1. 加载 CSS（顺序很重要）
import '@macroui/macroui/dist/themes.css'    // DaisyUI 27 主题
import '@macroui/macroui/dist/styled.css'    // DaisyUI styled components
import '@macroui/macroui-vue/dist/style.css' // 组件库样式

// 2. 创建应用
const app = createApp(App)

// 3. 全局注册组件
app.use(ElButton)
app.use(ElInput)
app.use(ElTable)
app.use(ElTableColumn)

// 4. 挂载
app.mount('#app')

提示：每个 El* 组件都暴露了带 install 方法的 plugin 形式，可以用 app.use(...) 全局注册；也可以用 app.component('ElButton', ElButton) 显式注册。

🎨 主题

支持 DaisyUI 全部 27 种主题。切换主题只需修改 <html> 的 data-theme 属性：

<html data-theme="light">  <!-- 默认 -->
<html data-theme="dark">   <!-- 暗色主题 -->
<html data-theme="dracula">

可用主题：

light dark cupcake bumblebee emerald corporate synthwave retro cyberpunk valentine halloween garden forest aqua lofi pastel fantasy wireframe black luxury dracula cmyk autumn business acid lemonade night coffee winter

📚 组件列表

基础组件

| 组件 | 说明 | | --- | --- | | ElButton | 按钮（6 种 type、3 种 size、loading、icon） | | ElLink | 文字链接 | | ElText | 文本（标题/段落/正文） | | ElIcon | 图标（基于 @macroui/macroui-icons） | | ElSpace | 间距 | | ElDivider | 分割线 |

表单组件

| 组件 | 说明 | | --- | --- | | ElInput | 文本输入 | | ElInputNumber | 数字输入 | | ElInputTag | 标签输入 | | ElSelect | 选择器 | | ElOption | 选项 | | ElCascader | 级联选择 | | ElTreeSelect | 树形选择 | | ElTree | 树形控件 | | ElCheckbox | 多选框 | | ElRadio | 单选框 | | ElSwitch | 开关 | | ElSlider | 滑块 | | ElRate | 评分 | | ElColorPicker | 颜色选择器 | | ElDatePicker | 日期选择 | | ElTimePicker | 时间选择 | | ElTimeSelect | 时间选择 | | ElUpload | 上传 | | ElForm | 表单 | | ElFormItem | 表单项 | | ElMention | @提及 | | ElAutocomplete | 自动补全 |

数据展示

| 组件 | 说明 | | --- | --- | | ElTable | 表格（排序、筛选、树形、虚拟滚动） | | ElTableColumn | 表格列 | | ElTableV2 | 虚拟表格 | | ElPagination | 分页 | | ElTag | 标签 | | ElBadge | 徽章 | | ElAvatar | 头像 | | ElSkeleton | 骨架屏 | | ElProgress | 进度条 | | ElEmpty | 空状态 | | ElResult | 结果页 | | ElDescriptions | 描述列表 | | ElStatistic | 统计数值 | | ElTimeline | 时间轴 | | ElCalendar | 日历 | | ElImage | 图片 | | ElCarousel | 走马灯 | | ElCollapse | 折叠面板 | | ElTree | 树 | | ElTreeV2 | 虚拟树 | | ElTransfer | 穿梭框 | | ElWatermark | 水印 |

反馈组件

| 组件 | 说明 | | --- | --- | | ElAlert | 警告提示 | | ElDialog | 对话框 | | ElDrawer | 抽屉 | | ElMessage | 消息提示（函数式调用） | | ElMessageBox | 消息弹框 | | ElNotification | 通知 | | ElPopconfirm | 弹出确认框 | | ElTooltip | 文字提示 | | ElPopover | 弹出框 | | ElLoading | 加载状态 |

导航组件

| 组件 | 说明 | | --- | --- | | ElMenu | 导航菜单 | | ElMenuItem | 菜单项 | | ElSubMenu | 子菜单 | | ElTabs | 标签页 | | ElTabPane | 标签页内容 | | ElBreadcrumb | 面包屑 | | ElBreadcrumbItem | 面包屑项 | | ElDropdown | 下拉菜单 | | ElDropdownItem | 下拉项 | | ElDropdownMenu | 下拉菜单容器 | | ElSteps | 步骤条 | | ElStep | 步骤 | | ElPageHeader | 页头 | | ElAffix | 固钉 | | ElBacktop | 回到顶部 | | ElAnchor | 锚点 | | ElTour | 漫游式引导 |

布局组件

| 组件 | 说明 | | --- | --- | | ElContainer | 容器 | | ElHeader / ElAside / ElMain / ElFooter | 布局子元素 | | ElRow / ElCol | 栅格 | | ElSplitter | 分隔面板 | | ElScrollbar | 滚动条 | | ElInfiniteScroll | 无限滚动指令 | | ElSegmented | 分段控制器 | | ElConfigProvider | 全局配置 | | ElBorder | 边框 |

🌍 国际化 (i18n)

import { ElConfigProvider } from '@macroui/macroui-vue'
import { zhCn, en } from '@macroui/macroui-vue/locale'

app.use(ElConfigProvider, { locale: zhCn })

支持的语言：

| 语言 | 引入路径 | | --- | --- | | 简体中文 (zh-cn) | @macroui/macroui-vue/locale/lang/zh-cn | | English (en) | @macroui/macroui-vue/locale/lang/en |

🛠 开发

# 安装依赖
pnpm install

# 开发模式（监听源码变化）
pnpm dev:lib

# 构建库产物 (输出到 dist/)
pnpm build:lib

# 运行单元测试
pnpm test

# E2E 测试
pnpm test:e2e

# 代码风格检查
pnpm lint

# TypeScript 类型检查
pnpm typecheck

📤 发布到 npm

# 1. 确认登录状态
npm whoami

# 2. 修改 package.json 中的 version (遵循 semver)

# 3. 构建
pnpm build:lib

# 4. 发布
npm publish --access public

📁 项目结构

macroui-vue/
├── packages/
│   ├── components/      # 90+ 组件源码
│   │   ├── ElButton/
│   │   ├── ElTable/
│   │   ├── ElForm/
│   │   └── ...
│   ├── icons/           # 图标库（@macroui/macroui-icons）
│   ├── locale/          # i18n 语言包
│   └── index.ts         # 包入口
├── tests/               # 单元测试
├── docs/                # 组件文档
├── styles/              # 全局样式
├── dist/                # 构建产物
└── package.json

🧪 浏览器支持

支持现代浏览器和 Vue 3（≥ 3.4）：

Chrome / Edge / Firefox / Safari 最近 2 个主版本
不支持 IE

🔗 相关项目

@macroui/macroui — DaisyUI 主题与样式
@macroui/macroui-icons — 图标库
Element Plus — API 兼容性参考

🤝 贡献

欢迎 PR 和 Issue！

Fork 本仓库
创建 feature 分支 (git checkout -b feature/AmazingFeature)
提交修改 (git commit -m 'Add some AmazingFeature')
推送到远程 (git push origin feature/AmazingFeature)
提交 Pull Request

📄 许可证

MIT License

🔗 链接

仓库地址：https://gitee.com/macroui/macroui-vue
文档：https://github.com/mobiui/macroui
问题反馈：https://github.com/mobiui/macroui/issues

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@macroui/macroui-vue

✨ 特性

📦 安装

🚀 快速开始

🎨 主题

📚 组件列表

基础组件

表单组件

数据展示

反馈组件

导航组件

布局组件

🌍 国际化 (i18n)

🛠 开发

📤 发布到 npm

📁 项目结构

🧪 浏览器支持

🔗 相关项目

🤝 贡献

📄 许可证

🔗 链接