🚀 即插即用的 Vue 3 业务组件库,让中后台开发回归简单

Ease UI 是一套为「快速复制」而生的 Vue 3 业务组件库。每个组件都是独立的 .vue 单文件,不依赖任何外部样式或工具函数,直接复制到你的项目即可使用。它仅依赖 Element Plus,却解决了中后台开发中表格选择混乱、搜索表单代码臃肿、日期范围绑定繁琐等真实痛点,让组件复用像复制代码一样简单。

✨ 新增

  • xly-json-viewer(JSON 查看器组件)src/components/xly-json-viewer/index.vue
    • 用于美化和展示 JSON 数据,内置语法高亮、折叠/展开、复制等功能
    • 基于 Vue 3 递归渲染实现,零第三方依赖
    • 支持对象、数组、字符串、数字、布尔值、null 等数据类型
    • depth 属性控制默认展开深度,设为 0 表示全部展开
    • max-height 属性限制最大高度,超出显示滚动条
    • 支持 light / dark 两种主题切换
    • 工具栏按钮已用 🔌 注释标注,二开时可直接删除对应行

🐛 修复

  • xly-input:修复输入框失去焦点输入内容消息的问题
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

💡 项目初衷

在中后台系统开发中,我们频繁遇到这些问题:

痛点 现状
🔧 组件库太重 引入一套组件库,需要学习整套 API、主题配置、构建配置,成本太高
📋 复制粘贴难 想从项目 A 复用一个组件到项目 B,发现依赖了各种公共样式、工具函数,拆不出来
🧩 Element Plus 不够用 基础组件有了,但业务组件(如带展开/收起的搜索表单、智能表格)还得自己写
🔄 重复造轮子 每个项目都要重新实现表格选择、日期范围绑定、表单布局…

于是,Ease UI 诞生了。

打造一套极致轻量、即拷即用的业务组件,让开发者可以像复制一段代码一样简单地复用组件。


✨ 核心优势

🎯 单文件组件,即拷即用

每个组件都是完全独立的 .vue 单文件,包含:

  • ✅ 完整的 <template> 模板
  • ✅ 独立的 <script setup> 逻辑
  • ✅ 自包含的 <style scoped> 样式

无需任何配置,直接复制 .vue 文件到你的项目即可使用!

# 只需要这一个文件
src/components/xly-button/index.vue

# 不需要:
❌ 额外的 CSS 文件
❌ 公共样式依赖
❌ 复杂的构建配置
❌ 主题变量文件

🔌 仅依赖 Element Plus

本组件库仅依赖 Element Plus(及其图标库),不引入其他 UI 组件库:

{
"dependencies": {
"element-plus": "^2.13.6",
"@element-plus/icons-vue": "^2.3.2"
}
}

依赖说明:

  • 🎨 Element Plus - 仅使用其图标组件(@element-plus/icons-vue
  • 🚫 无其他 UI 库 - 不依赖 Ant Design Vue、Naive UI、Vuetify 等
  • 🚫 无样式库 - 不依赖 Tailwind CSS、UnoCSS 等原子类框架
  • 📝 纯 Vue 3 + SCSS - 所有组件样式独立编写

这意味着:

  • 如果你的项目已经使用 Element Plus,可以无缝集成
  • 如果你的项目没有 Element Plus,只需安装它即可
  • 不会有多个 UI 库的样式冲突问题

如果你觉得这个项目还不错或对你有帮助,欢迎到 Gitee 或 GitHub 上点个 Star,这是对作者最好的支持~开源不易,且用且珍惜。

也欢迎关注公众号【Ease UI开源】,不错过最新的更新动态。

🔗 Gitee:https://gitee.com/yun_hua_admin/ease-ui
🔗 GitHub:https://github.com/Momingyun/ease-ui
🔗 预览地址:http://1.14.65.79

Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐