我做了一个不止有基础组件的 Vue 3 UI 库,还把 AI 组件也做进去了

大家好,我是鱼樱!!!

关注公众号【鱼樱AI实验室】持续分享更多前端和AI辅助前端编码新知识~~

不定时写点笔记写点生活~写点前端经验。

在当前环境下,纯前端开发者可以通过技术深化、横向扩展、切入新兴领域(MCP TOOLS AI应用产品方向 等)以及产品化思维找到突破口。(不管写多久的代码,技术深度广度如何一定要具备独立赚钱的能力呀!!老铁们,因为总有一天你不在职场总有一天会面对选择和职场的无情)

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

前端最卷的年代或许真该结束了AI Agent 工程师将是未来的主角,人类只决策和思考商业化模式,AI执行的年代正在如火如荼的进行着;

抱歉各位最近一年忙于生计兼职花费时以及带娃花费精力和电商店铺人也比较多技术文章这块实属拖堂了,快一年了才更新,但是技术文章还是会不定时更新一些核心的技术分享,和大家一起学习前端路程以及未来的AI视觉AI商业思维。

我结合AI大模型做了一个不止有基础组件的 Vue 3 UI 库,还把 AI 组件也做进去了 全面开源了

作为资深的AI体验官(从平时自己电商【程序员转行主业】,副业编码,副业为爱发电烧token,体验了各种AI大模型国内国外体验了各种AI编辑器)从而有感写了一个纯AI的组件库(0行手打纯AI实现尽可能用所学前端专业术语、AI skills、AI大模型、MCP、cli等手段结合完成)

前端做久了,大家都会遇到一个很现实的问题:

市面上的 UI 库很多,但真正落到业务里时,总会差一点。

要么基础组件足够全,但对企业后台和复杂业务场景支持一般;

要么视觉好看,但工程化和可维护性不够;

要么能搭页面,却很难承接现在越来越多的 AI 场景需求。

所以我一直在想,有没有可能做一套更"贴近真实项目"的组件库:

  • 既能覆盖日常中后台开发
  • 又能兼顾复杂业务交互
  • 还要能承接 AI 应用场景
  • 同时在工程化、类型、安全感和可维护性上都足够扎实

于是,YH UI 就这样做出来了。

YH UI 是什么?

YH UI 是一套面向企业级应用与 AI 场景的 Vue 3 组件库。

它基于 Vue 3 + TypeScript + Vite 打造,目标不是做一个"只能看 Demo 的组件展示库",而是做一套真正能进入实际项目、能长期维护、能持续扩展的前端基础设施。

和很多传统 UI 库不同,YH UI 不只关注"基础组件有没有",更关注:

  • 组件在真实业务里是否好用
  • API 设计是否清晰稳定
  • 类型提示是否友好
  • 样式体系是否易于定制
  • 是否具备承接 AI 产品形态的能力

简单来说,它不是只帮你"把页面搭起来",而是希望帮你把一整套项目体验和开发效率一起提上去。

为什么我会做这套组件库?

因为我越来越明显地感受到,今天的前端项目已经不是"按钮 + 表单 + 表格"这么简单了。

尤其是企业项目和智能化产品,往往同时面临这些问题:

  • 基础组件要全,不然开发效率上不去
  • 交互要统一,不然系统会越来越乱
  • 类型要稳,不然多人协作成本很高
  • 构建要轻,不然包体积和性能扛不住
  • 还要支持 AI 相关能力,不然很难支撑新场景

很多团队最后会选择"多个库拼起来",短期看似灵活,长期却容易出现这些问题:

  • 风格不统一
  • API 心智割裂
  • 主题体系不一致
  • 维护成本越来越高
  • 升级和兼容变得很痛苦

所以我更想做的是:
一套库,统一基础交互、业务体验与 AI 场景能力。

YH UI 有哪些特点?

1. 基础组件完整,能直接进入企业项目

YH UI 已经覆盖了大量高频基础组件,适合中后台、业务平台、门户类系统快速落地。

你可以把它理解成一套真正面向业务开发效率的 UI 基座。

它不是只提供"能用"的组件,而是尽量把常见细节也一并处理好,比如:

  • 表单交互体验
  • 弹窗和消息类反馈能力
  • 布局与容器组织
  • 滚动、装载、状态切换等细节行为
  • 组件在复杂容器和实际页面中的表现

如果你做过后台项目,你会很清楚:

真正决定体验的,从来不是组件截图,而是这些边角问题有没有被处理到位。

2. 不止基础组件,还内置 AI 组件能力

这是 YH UI 跟很多传统组件库不太一样的地方。

现在越来越多的项目,不再只是"管理后台",而是开始叠加 AI 助手、对话、智能输入、内容生成、流程辅助等能力。

如果组件库依然只停留在传统表单和表格层面,其实已经很难满足这类项目的开发需求。

所以在 YH UI 里,我把 AI 场景也作为核心方向之一来建设。

目前它不仅有基础组件能力,也包含 AI 相关组件与场景化封装,目标是让开发者在搭建智能应用时,不需要每次都从零开始拼装界面和交互逻辑。

这意味着你可以用更统一的方式,同时构建:

  • 中后台系统
  • 业务工作台
  • 内容平台
  • 智能助手界面
  • AI 驱动的企业应用

3. 工程化不是附加项,而是底层能力

很多 UI 库把工程化当成"文档里提一下"的内容,但在我看来,真正要服务开发者,工程化能力必须是底层设计的一部分。

YH UI 在这方面坚持几个原则:

  • 基于 Vue 3 + TypeScript
  • 使用 Vite 构建
  • 使用 pnpm 管理依赖
  • 注重按需使用与构建效率
  • 持续关注包体积优化
  • 强调可维护、可扩展、可演进

因为组件库一旦要进入团队项目,它就不只是一个"npm 包",而是会影响:

  • 开发体验
  • 打包速度
  • 类型体验
  • 线上性能
  • 后续升级成本

这也是为什么我会非常关注"是否真的适合长期使用",而不只是"Demo 漂不漂亮"。

4. 更贴近真实业务,而不是只服务展示页

很多组件库在官网里看起来非常完整,但一接到真实业务页面里,就会暴露出不少问题:

  • 复杂布局下表现不稳定
  • 边界状态处理不够
  • 主题适配不够细
  • 函数式调用能力不完整
  • 实际业务里仍然需要写大量补丁代码

YH UI 在设计时就尽量避免这种"只适合展示,不适合落地"的情况。

我的目标一直很明确:

不是做一个看起来很全的库,而是做一个开发者真正愿意放进项目里的库。

它适合什么样的开发者和团队?

如果你属于下面几类,我觉得可以重点看看 YH UI

  • 正在做 Vue 3 企业级项目的前端开发者
  • 希望统一团队 UI 规范和交互体验的技术负责人
  • 正在搭建后台系统、运营平台、业务工作台的团队
  • 想做 AI 应用,但不想从零拼交互界面的开发者
  • 希望在"基础组件 + AI 组件"上获得一体化方案的团队

特别是这几年,越来越多项目开始从"传统系统"走向"智能系统"。

很多团队缺的不是一个按钮库,而是一套能同时支撑业务界面和 AI 交互的前端基础设施。

而这正是我想让 YH UI 去解决的事情。

我希望 YH UI 带来的,不只是组件,而是更高效的开发体验

我始终觉得,一个优秀的 UI 库,最终价值不在于"组件数量",而在于它能不能真正帮开发者节省时间、减少重复劳动、提升项目一致性。

如果一个组件库能做到这些事,它才真正有意义:

  • 让页面搭建更快
  • 让交互设计更统一
  • 让团队协作更顺畅
  • 让后续维护更轻松
  • 让新场景扩展更自然

YH UI 也是沿着这个方向持续迭代的。

目前它已经覆盖了大量基础组件,并进一步扩展了 AI 组件能力。

如果你做的是现代化企业应用,或者正准备做一些带智能交互能力的新产品,我相信它会比"纯传统 UI 库"更适合你。

现在它发展到什么阶段了?

目前,YH UI 已经形成了比较完整的能力结构,既包含高频基础组件,也覆盖 AI 方向的组件建设。

整体思路不是"做一个大而全的玩具",而是做一个可以持续打磨、持续进入真实项目的长期产品。

我会继续围绕几个方向迭代它:

  • 组件体验继续增强
  • API 设计继续统一
  • 文档和示例继续完善
  • AI 场景能力继续拓展
  • 包体积和构建效率继续优化

对我来说,这不是一个一次性的开源展示项目,而是一套会持续演进的前端能力体系。

如果你也在找一套更适合当下项目的 Vue 3 组件库,欢迎试试

如果你正好有这些需求:

  • 想快速搭建企业级项目
  • 想要更统一的交互体系
  • 想获得更扎实的 TypeScript 和工程化支持
  • 想在项目里自然接入 AI 场景能力

那么欢迎你来试试 YH UI

我也非常欢迎大家体验、提建议、提 issue,一起把这套组件库打磨得更好。

----------------------------------------YH-UI现代组件库-----------------------------------------------

仓库地址:github.com/1079161148/...

文档地址:YU-UI组件库文档

在线示例:YH UI 后台系统YH UI AI工作流 展示的消费端的组件功能都测试了一遍~这里的基础功能

目前 YH UI 已覆盖 80+ 基础组件与 20+ AI 组件能力,能够同时服务传统中后台开发与新一代智能应用搭建。

如果这套库对你有帮助,也欢迎点个 star 支持一下。

你们的反馈,会直接决定它下一步进化的方向。

最后

我一直相信,未来的前端组件库,不应该只停留在"把页面拼出来"。

它应该同时服务于:

  • 开发效率
  • 业务落地
  • 工程质量
  • 智能化场景

YH UI,就是我围绕这个目标做出来的一次认真实践。

如果你也认可这个方向,欢迎来体验。如果你也喜欢请给个start~~~~

相关推荐
泥秋哥4 小时前
微前端-Module Federation运行时工具
前端·架构
靠谱者也4 小时前
Agent Loop 越做越像 RPA:浏览器自动化里的五个反直觉
agent·ai编程
小黑蛋9124 小时前
Nacos 集群部署方案
前端
PILIPALAPENG4 小时前
第4周 Day 4:Agent 工作流模式——编排复杂流程
前端·人工智能·python
KaMeidebaby4 小时前
卡梅德生物技术快报|蛋白的过表达质粒构建与生信分析实验全流程复盘
前端·数据库·其他·百度·新浪微博
ricardo19735 小时前
代码分割 + 路由懒加载 + 字体子集化:前端瘦身三板斧
前端·面试
dsyyyyy11015 小时前
CSS 2D 效果、3D 效果 与 Animation 总结
前端·css·3d
jerrywus5 小时前
Vibe Coding 实战:三天,一个人,一个 Claude Session Viewer——给三家 AI CLI 当统一会话浏览器
前端·claude·gemini
lichenyang4535 小时前
HarmonyOS AI 聊天模块架构复盘:从 UI、状态、Controller 到 Provider、SSE 与业务卡片
前端