爆肝两年！打磨了一款 Vue 3 组件库（很新），欢迎体验 👏

[userKamtao]

项目地址

• 文档地址： https://lew.kamtao.com
• github： https://github.com/lewkamtao/Lew-UI

背景

依稀记得两年前，在 v2 首发第一个版本，到现在已经两年了，这个组件库仍然在每天维护。

起初有过几个小伙伴感兴趣来维护，但是发现每个人的写法参差不齐，后面可能会堆叠成一坨千奇百怪的东西，以至于我自己也没办法自主可控。所以这两年主要还是我自己在维护。

因为很喜欢前端，可以把前端当作爱好，以至于周末和下班后，仍然有热情坐在电脑前打磨各种有趣的东西。

其实 Lew-UI 和传统的大厂组件库还是有区别的，用法上更灵活，比如：

优点

• 内置近 50 个常用组件以及全局指令
• 用了最新的 Vue 3.5
• 赏心悦目的暗黑模式
• 与传统的组件库大有不同、用法更简单
• 自主研发表单引擎，复杂表单也可以写快快
• 核心团队不会跑路（很重要）

缺点

犹豫个人精力有限，组件库可能仍然无法达到企业级使用的程度。 它有以下的这些问题：

• 它还没被大规模的广泛应用
• 它还没经历过千锤百炼的测试
• 它还没适配各种千奇百怪的浏览器

但我可以肯定的是，你在 Github 上提的每一个 issues ，我都很很重视，除非能力有限没法解决 : (

无论是建议还是意见，都非常感谢兄弟们 👏👏👏

谢谢小伙伴们的建议和鼓励，每一条建议都会认真看的，很多建议非常 nice ，虽然任重道远，但有更多的动力去维护了！

[dbldong]

文档首页这个效果很好诶

[yongyuanfan2]

简单体验了一下，还是很不错的，希望下个项目能用上这个组件库，加油！

[NickLuan]

首页很炫、但我有强迫症啊

[EmptyDX]

和 antd 很像😂

[Sahzzz]

好看的！

[Laobai]

很好看，但是公司项目还是用 element-ui 稳妥一点

[houshuu]

很漂亮！

[concernedz]

好看，首页很炫酷啊

[laobobo]

UI 看起来很舒服，不错加油

[abigmiu]

flex 这个组件思路好棒

[cxz2998]

支持大佬

[ChainLock]

首页很炫酷啊，怎么做到的

[yhxx]

发现很早之前就 star 过了
这个首页很特别，有印象

[zhouyg]

首页炫，但也好卡

[wkong]

支持

[Felldeadbird]

配色不错，我收下了。

[HuberyPang]

赞

[Chuckle]

很 cool 很特别！

[clencat]

好像没看到主题相关的内容啊，这个定制主题方便么？

[f056917]

厉害，支持一下！

[hanswu]

支持 很久之前就关注过了🔥

[xuemian]

首页牛逼

[jy03179163]

太厉害了！大佬！！！

[userKamtao]

@clencat 应该是不方便的，哈哈哈哈，还没考虑主题定制这一块。

[body007]

牛逼，支持一波。

[kissice]

点进入，原来早就关注过了？再次支持，加油！

[location123]

文档首页这个效果强

[kydin]

文档做得好棒！ op 的博客也不错呀，是用什么主题呢？

[leonfong]

支持，已 star

[userKamtao]

@kydin 博客 vscode 那个吗，那个自己写的哈哈哈

[hellodigua]

确实好看，赏心悦目，每次看都觉的好看

[abcde123456789]

我就说这个首页很熟悉，打开仓库一看

[img][/img]

[Freakr]

文档首页的“关键词标签”，如果点击编辑框后光标在第二行，已有标签的删除功能好像会失效。未点击编辑框和点击编辑框后光标在第一行时，已有标签的删除功能看着正常。

[RoyRao]

star 支持一下，顺便问一下 OP 熟悉 React 吗？有机会做 React 版本的嘛？

[dapaoge]

赞 👍

[userKamtao]

@Freakr 这个好像真有点问题，应该是失焦的时候输入框跳动导致，没法选中删除按钮的原因，很感谢提出这个 bug ，我周末琢磨琢磨怎么优化！！！

[userKamtao]

@RoyRao React 不太熟，精力很有限，可能暂时精力做 React 的版本了：（

[AchieveHF]

看到表单那里收藏的

[Waverly]

好看好看！

[AchieveHF]

反馈一个体验上的，点击显示源码，然后收起时候

[shiny]

效果很不错！建议预览页面提供英语，并且开赞助。相信会有很多老外会 donate

[userKamtao]

@shiny 会考虑国际化，但其实有点害怕被 donate ，一旦有了赞助，我便开始变得不像我，会有很多声音会左右自己，如果它是完全公益的，那么会比较随心所欲。

[agileago]

感觉没太大新意，没跟得上时代的发展，我觉得新一代的 vue 组件库应该是类似 nextui 那种

1. 使用 tailwind 作为样式方案
2. 完全使用 tsx 书写组件

[WickedDogg]

很赞啊，首页的效果太棒了

[dudubaba]

强👍

[ersic]

非常棒

[com781517552]

@userKamtao #30 这博客好玩 开源了吗

[com781517552]

同样 98 年的 差距也太大了

[ixoy]

不错，坚持难能可贵，是什么让你坚持下来的？
爱好前端？为啥选择 UI 组件库。
不是网页游戏，webgl 特效更酷炫更好玩啊。

[userKamtao]

@ixoy 我闲暇之余也会做很多其他有意思的项目，但是每次在做项目的时候，发现其他的组件库 用起来不太顺手，应该可以有更好的体验和用法。所以就这个组件库 也是自己在用，边用边完善。

[userKamtao]

@com781517552 因为后端是 go 写的，其实开源出来只是纯前端的话意义似乎不大，精力有限没时间整理所以没开源。

[qwwuyu]

路过看到 999 个 star 还是点成 1k 算了

[userKamtao]

@qwwuyu 你人怪好咧！！！！！谢谢啦～

[liangdi]

首页可以看到适用 Angular ?

[userKamtao]

@liangdi 没勾上 所以是不可用哈哈哈哈

[liangdi]

@userKamtao 那你把另外两个选项 disabled 调吧!

[fuzqing]

很漂亮，配色很好看，但为什么不是两年半？？？

[userKamtao]

@fuzqing 对！！确实是两年半。

[falcon05]

学习了，后面考虑在项目使用，佩服 op 对代码的热爱，不要压力太大。

[wuxuehai2020]

支持，真熬得住

[zzzyyysss]

给我信心了！我也要打磨一款，solidJS 的组件库

[jellyX]

OP 牛逼

[Dragonphy]

很酷啊，做小项目的时候我去试试看怎么样！

[LiLittleCat]

不错不错，star 了

[zhuang0718]

之前 star 过~加油哦 希望能做项目用上

[gmyxds]

很酷，可以学习一下楼主的项目，很厉害了
首页很炫酷
但是大项目还是不太敢用哦

[userKamtao]

@gmyxds 是的，我在帖子末尾指出了目前的缺点，大项目还是别用，可能需要一个过程。

[bojue]

表单搭建引擎也吊

[ssteam]

体验看看

[woodytang]

很不错！！不过我有一个问题，现在这个年头还用组件库吗？不都是 headless UI ，Shadcn ，Tailwind 这些了吗？

[MoonWalker]

DatePicker 有 bug, 先点上个月某个灰色日期，再选择一个当月的日期。

[MrSheng]

很酷，一键三连了～～～

[bladey]

star 支持 👍

[kapaseker]

老哥都赚了十个亿了还搞技术推广吗

[userKamtao]

@kapaseker 推广还是要的（首页那个流水只是 demo 啦

[userKamtao]

@MoonWalker 我瞅瞅

[kiroli]

厉害的 加油

[markyun02]

@ChainLock 首页关键代码这句：scale(1.1) perspective(1000px) rotateX(12deg) rotateY(-24deg) rotate(8deg) translate(-30px,50px)

[jaycezhang7890]

@dbldong 首页这个效果，antd 首页就有这个效果，甚至 antd 还能跟随鼠标晃动
不有有一说一，基本一个人维护很厉害了，而且首页看起来确实很好看，up 主加油

[zzfly256]

耳目一新的感觉；
提个小需求，不知道能否实现：
在表单组件上，下拉选项能支持配后台 API 吗，直接从后端接口取下拉选项的内容

[newOpenEyes]

表单引擎中的上传组件样式有问题，会遮挡其他元素

[leaveeel]

支持，我也想过做 ui 组件，不过懒一直没做。
看了一下组件只有演示和属性，部分属性可选的枚举没有列出来，<Props>可以再加一列可选值，像 icon<props>可以链接到 icon<menu>，objectFit<props>链接到 object-fit<MDN>这样。文档方面可以再完善下。

DatePicker 格式化那里选完日期再打开选择框上面的年月会变成 NaN 。

- DateRangePicker 有很多 bug
- 第一次加载完先选禁用日期再选可用会<Invalid Date>；
- 重新选择日期/执行清空后，先选禁用再选可用，startDate 会是上次的 startDate ；
- 先选可用 [A] 再选禁用 [B] hover 会失效，不会更新日期，再点击 [C] 会清空 value 重新赋值给 startDate ；
- 选中某日期 [A] 后关掉再打开，虽然显示的还是初始值，再选一个日期 [B] 会保存 [A ，B] 的日期范围；简单找了下源码，setValue 方法里 i 再点击的时候就已经进位了，放在判断后面可能就行？没有细看，不过这三个 bug 都是这个导致的。
- 两个日期框没有联动，实际用一个框就能完成跨月的选择

Cascader 第一次保存后再展开没有加默认选中，随后再点击其他项 [B] 不保存关闭再展开会默认选中上次选的 [B]

Pagination 可用加个布局顺序的 props ，参考 elm 的<layout>

页面上组件展开源码的时候通过右边导航定位有问题，应该是没有更新新的位置，也可以点导航收起源码。

[yelan]

有一个小建议，image 组件加载失败的提示图片，可以用“裂开”的背景图效果会好一点~

[ala2008]

没有布局吗，响应式

[hereIsChen]

网站首页有点花，至少要把左上角区域标题和开始使用的 2 个按钮区域留出空白
内容斜着加上流水的数字一直再变
看着有点难受

[zero3412]

提个小建议，Table 组件比如在“固定行列”时，横向滚动条能否高一些，现在鼠标不容易点中
感觉大部分组件库都有这问题

[zhangkui]

表单制作器不错

[baihaoyang]

UI 很炫酷，微信小程序可以用吗？

[mzsongyan]

支持，在小项目中用过，很方便，也提过几次 issues ，楼主也很用心的回复了。
目前来说基本可用了，Table 组件表头要是有排序就好了。

[wjup]

牛逼

[mzsongyan]

@zero3412 可能因为滚动条高了就比较难看，我基本都是用 Shift+鼠标滚轮来操作。

[rrfeng]

手机打开首页。。。一言难尽

[userKamtao]

@ala2008 考虑到组件可能偏后台开发，就没完全适配手机
@zero3412 我忽略了这一点平时都是按住 shift 来左右滚动，我看看怎么优化。
@mzsongyan 这个我最近在完善了，因为需要新增的组件太多了，很多想法堆起来，所以这个需求就 delay 了很久。
@baihaoyang 不支持咧，目前组件就是专注 pc 的后台系统开发
@hereIsChen 不知道是不是屏幕比例问题，其实左上角已经留空了。我看看怎么适配
@yelan 这是个很好的建议，我已经 mark 下来啦

[userKamtao]

@jaycezhang7890 其实我在发布第一个版本的时候，我就用了这个效果，我保证我不是抄他的，嘻嘻～
@zzfly256 这个肯定是支持的，文档有例子
@newOpenEyes 我瞅瞅，还有这种事！
@leaveeel 日期组件这里 还需要完善的东西 太多了，任重道远啊，还要加入时间选择，各种场景，我会努力的！

[userKamtao]

@leaveeel 很开心 收到你这么多的建议 感谢啦

[userKamtao]

@zzfly256 可能例子写的不好，应该单独拎出来，searchMethod 这个方法，就可以传入一个通过接口获取数据的方法，只需要把 options 返回即可。

[userKamtao]

@zzfly256 表单引擎的选项请求的话 还在构思配置的实现方式

[mocococ]

色彩搭配，效果 风格感觉可以再改改或者增加一些，个人还是比较喜欢 mui 这种，更加温和的风格

https://lew.kamtao.com/#/Alert

https://mui.com/material-ui/react-alert/

OP 的 UI 库 看上去很像 ant.design ， 但是 功能性组件还是有点少。人少写这种确实比较耗时间。

[userKamtao]

@mocococ 好！你喜欢这种，那我直接抄他的风格。看上去很像 ant ，那我要抄一抄 mui ，把好的抄过来。个人精力很有限，而且应该会越来越多的！

[ms2297248353]

我是有个需求，我在开发 Halo 插件时，插件用的也是 Vue, 但是因为插件的缘故，官方提供的组件很简单，写起来一点都不顺手。安装 arco 后 vite 自动导入组件，但是最终，样式全部没有。有没有可能组件完全独立化，安装单个组件，可以直接使用，不用全量安装，样式跟随组件走，也不会造成样式丢失的问题。