爆肝两年!打磨了一款 Vue 3 组件库(很新),欢迎体验 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
userKamtao
V2EX    Vue.js

爆肝两年!打磨了一款 Vue 3 组件库(很新),欢迎体验

  userKamtao
lewkamtao 2024-09-12 15:59:11 +08:00 16915 次点击
这是一个创建于 394 天前的主题,其中的信息可能已经有所发展或是发生改变。

项目地址

背景

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

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

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

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

优点

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

缺点

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

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

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

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

第 1 条附言    2024-09-13 11:52:07 +08:00
谢谢小伙伴们的建议和鼓励,每一条建议都会认真看的,很多建议非常 nice ,虽然任重道远,但有更多的动力去维护了!
158 条回复    2025-01-01 22:34:18 +08:00
1  2  
dbldong
    1
dbldong  
   2024-09-12 16:02:51 +08:00   2
文档首页这个效果很好诶
yongyuanfan2
    2
yongyuanfan2  
   2024-09-12 16:03:14 +08:00
简单体验了一下,还是很不错的,希望下个项目能用上这个组件库,加油!
NickLuan
    3
NickLuan  
   2024-09-12 16:04:21 +08:00
首页很炫、但我有强迫症啊
EmptyDX
    4
EmptyDX  
   2024-09-12 16:07:41 +08:00
和 antd 很像
Sahzzz
    5
Sahzzz  
   2024-09-12 16:08:01 +08:00
好看的!
Laobai
    6
Laobai  
   2024-09-12 16:17:07 +08:00
很好看,但是公司项目还是用 element-ui 稳妥一点
houshuu
    7
houshuu  
   2024-09-12 16:23:49 +08:00
很漂亮!
concernedz
    8
concernedz  
   2024-09-12 16:25:13 +08:00
好看,首页很炫酷啊
4Et5ShxMIq58n6Lr
    9
4Et5ShxMIq58n6Lr  
   2024-09-12 16:26:37 +08:00
UI 看起来很舒服,不错加油
abigmiu
    10
abigmiu  
   2024-09-12 16:30:31 +08:00
flex 这个组件思路好棒
cxz2998
    11
cxz2998  
   2024-09-12 16:32:31 +08:00
支持大佬
ChainLock
    12
ChainLock  
   2024-09-12 16:33:46 +08:00
首页很炫酷啊,怎么做到的
yhxx
    13
yhxx  
   2024-09-12 16:36:03 +08:00   1
发现很早之前就 star 过了
这个首页很特别,有印象
zhouyg
    14
zhouyg  
   2024-09-12 16:40:53 +08:00
首页炫,但也好卡
wkong
    15
wkong  
   2024-09-12 16:45:05 +08:00
支持
Felldeadbird
    16
Felldeadbird  
   2024-09-12 16:53:09 +08:00
配色不错,我收下了。
HuberyPang
    17
HuberyPang  
   2024-09-12 16:53:11 +08:00
Chuckle
    18
Chuckle  
   2024-09-12 16:59:32 +08:00
很 cool 很特别!
clencat
    19
clencat  
   2024-09-12 17:02:37 +08:00
好像没看到主题相关的内容啊,这个定制主题方便么?
p8YFk4f3E8SJ3aEv
    20
p8YFk4f3E8SJ3aEv  
   2024-09-12 17:03:21 +08:00
厉害,支持一下!
hanswu
    21
hanswu  
   2024-09-12 17:04:08 +08:00
支持 很久之前就关注过了
xuemian
    22
xuemian  
   2024-09-12 17:06:38 +08:00
首页牛逼
jy03179163
    23
jy03179163  
   2024-09-12 17:11:47 +08:00
太厉害了!大佬!!!
userKamtao
    24
userKamtao  
OP
   2024-09-12 17:12:26 +08:00
@clencat 应该是不方便的,哈哈哈哈,还没考虑主题定制这一块。
body007
    25
body007  
   2024-09-12 17:18:31 +08:00
牛逼,支持一波。
kissice
    26
kissice  
   2024-09-12 17:23:00 +08:00
点进入,原来早就关注过了?再次支持,加油!
location123
    27
location123  
   2024-09-12 17:24:43 +08:00
文档首页这个效果强
leonfong
    29
leonfong  
   2024-09-12 17:32:36 +08:00
支持,已 star
userKamtao
    30
userKamtao  
OP
   2024-09-12 17:33:15 +08:00
@kydin 博客 vscode 那个吗,那个自己写的哈哈哈
hellodigua
    31
hellodigua  
   2024-09-12 17:40:13 +08:00
确实好看,赏心悦目,每次看都觉的好看
abcde123456789
    32
abcde123456789  
   2024-09-12 17:42:24 +08:00
我就说这个首页很熟悉,打开仓库一看

[img][/img]
Freakr
    33
Freakr  
   2024-09-12 17:45:15 +08:00
文档首页的“关键词标签”,如果点击编辑框后光标在第二行,已有标签的删除功能好像会失效。未点击编辑框和点击编辑框后光标在第一行时,已有标签的删除功能看着正常。
RoyRao
    34
RoyRao  
   2024-09-12 17:47:03 +08:00
star 支持一下,顺便问一下 OP 熟悉 React 吗?有机会做 React 版本的嘛?
dapaoge
    35
dapaoge  
   2024-09-12 17:47:57 +08:00
userKamtao
    36
userKamtao  
OP
   2024-09-12 17:49:53 +08:00
@Freakr 这个好像真有点问题,应该是失焦的时候输入框跳动导致,没法选中删除按钮的原因,很感谢提出这个 bug ,我周末琢磨琢磨怎么优化!!!
userKamtao
    37
userKamtao  
OP
   2024-09-12 17:51:37 +08:00
@RoyRao React 不太熟,精力很有限,可能暂时精力做 React 的版本了:(
AchieveHF
    38
AchieveHF  
   2024-09-12 17:56:09 +08:00
看到表单那里收藏的
Waverly
    39
Waverly  
   2024-09-12 17:57:45 +08:00
好看好看!
AchieveHF
    40
AchieveHF  
   2024-09-12 18:01:07 +08:00
反馈一个体验上的,点击显示源码,然后收起时候
shiny
    41
shiny  
   2024-09-12 18:02:48 +08:00
效果很不错!建议预览页面提供英语,并且开赞助。相信会有很多老外会 donate
userKamtao
    42
userKamtao  
OP
   2024-09-12 18:05:40 +08:00   1
@shiny 会考虑国际化,但其实有点害怕被 donate ,一旦有了赞助,我便开始变得不像我,会有很多声音会左右自己,如果它是完全公益的,那么会比较随心所欲。
agileago
    43
agileago  
   2024-09-12 18:06:27 +08:00
感觉没太大新意,没跟得上时代的发展,我觉得新一代的 vue 组件库应该是类似 nextui 那种

1. 使用 tailwind 作为样式方案
2. 完全使用 tsx 书写组件
WickedDogg
    44
WickedDogg  
   2024-09-12 18:09:37 +08:00
很赞啊,首页的效果太棒了
dudubaba
    45
dudubaba  
   2024-09-12 18:15:34 +08:00
ersic
    46
ersic  
   2024-09-12 18:20:25 +08:00
非常棒
vk4LNh8gE08SBd9V
    47
vk4LNh8gE08SBd9V  
   2024-09-12 19:10:40 +08:00
@userKamtao #30 这博客好玩 开源了吗
vk4LNh8gE08SBd9V
    48
vk4LNh8gE08SBd9V  
   2024-09-12 19:13:07 +08:00
同样 98 年的 差距也太大了
ixoy
    49
ixoy  
   2024-09-12 19:19:43 +08:00
不错,坚持难能可贵,是什么让你坚持下来的?
爱好前端?为啥选择 UI 组件库。
不是网页游戏,webgl 特效更酷炫更好玩啊。
userKamtao
    50
userKamtao  
OP
   2024-09-12 19:24:56 +08:00
@ixoy 我闲暇之余也会做很多其他有意思的项目,但是每次在做项目的时候,发现其他的组件库 用起来不太顺手,应该可以有更好的体验和用法。所以就这个组件库 也是自己在用,边用边完善。
userKamtao
    51
userKamtao  
OP
   2024-09-12 19:26:36 +08:00
@com781517552 因为后端是 go 写的,其实开源出来只是纯前端的话意义似乎不大,精力有限没时间整理所以没开源。
qwwuyu
    52
qwwuyu  
   2024-09-12 19:27:46 +08:00
路过看到 999 个 star 还是点成 1k 算了
userKamtao
    53
userKamtao  
OP
   2024-09-12 19:34:56 +08:00
@qwwuyu 你人怪好咧!!!!!谢谢啦~
liangdi
    54
liangdi  
   2024-09-12 21:58:06 +08:00
首页可以看到适用 Angular ?
userKamtao
    55
userKamtao  
OP
   2024-09-12 21:59:26 +08:00
@liangdi 没勾上 所以是不可用哈哈哈哈
liangdi
    56
liangdi  
   2024-09-12 22:02:44 +08:00
@userKamtao 那你把另外两个选项 disabled 调吧!
fuzqing
    57
fuzqing  
   2024-09-12 22:06:19 +08:00
很漂亮,配色很好看,但为什么不是两年半???
userKamtao
    58
userKamtao  
OP
   2024-09-12 22:08:05 +08:00
@fuzqing 对!!确实是两年半。
GG668v26Fd55CP5W
    59
GG668v26Fd55CP5W  
   2024-09-12 22:11:39 +08:00 via iPhone
学习了,后面考虑在项目使用,佩服 op 对代码的热爱,不要压力太大。
wuxuehai2020
    60
wuxuehai2020  
   2024-09-12 22:11:47 +08:00
支持,真熬得住
zzzyyysss
    61
zzzyyysss  
   2024-09-12 22:14:33 +08:00
给我信心了!我也要打磨一款,solidJS 的组件库
jellyX
    62
jellyX  
   2024-09-12 22:16:18 +08:00
OP 牛逼
Dragonphy
    63
Dragonphy  
   2024-09-12 22:31:11 +08:00
很酷啊,做小项目的时候我去试试看怎么样!
LiLittleCat
    64
LiLittleCat  
   2024-09-12 23:10:39 +08:00
不错不错,star 了
zhuang0718
    65
zhuang0718  
   2024-09-12 23:28:44 +08:00
之前 star 过~加油哦 希望能做项目用上
gmyxds
    66
gmyxds  
   2024-09-12 23:35:17 +08:00
很酷,可以学习一下楼主的项目,很厉害了
首页很炫酷
但是大项目还是不太敢用哦
userKamtao
    67
userKamtao  
OP
   2024-09-12 23:49:42 +08:00
@gmyxds 是的,我在帖子末尾指出了目前的缺点,大项目还是别用,可能需要一个过程。
bojue
    68
bojue  
   2024-09-12 23:59:53 +08:00
表单搭建引擎也吊
ssteam
    69
ssteam  
   2024-09-13 00:08:25 +08:00
体验看看
woodytang
    70
woodytang  
   2024-09-13 00:29:12 +08:00
很不错!!不过我有一个问题,现在这个年头还用组件库吗?不都是 headless UI ,Shadcn ,Tailwind 这些了吗?
MoonWalker
    71
MoonWalker  
   2024-09-13 08:55:04 +08:00
DatePicker 有 bug, 先点上个月某个灰色日期,再选择一个当月的日期。
LieNoWell
    72
LieNoWell  
   2024-09-13 09:02:04 +08:00
很酷,一键三连了~~~
bladey
    73
bladey  
   2024-09-13 09:10:27 +08:00
star 支持
kapaseker
    74
kapaseker  
   2024-09-13 09:34:11 +08:00
老哥都赚了十个亿了还搞技术推广吗
userKamtao
    75
userKamtao  
OP
   2024-09-13 09:45:48 +08:00
@kapaseker 推广还是要的(首页那个流水只是 demo 啦
userKamtao
    76
userKamtao  
OP
   2024-09-13 09:46:00 +08:00
@MoonWalker 我瞅瞅
kiroli
    77
kiroli  
   2024-09-13 09:49:24 +08:00
厉害的 加油
markyun02
    78
markyun02  
   2024-09-13 10:04:31 +08:00
@ChainLock 首页关键代码这句:scale(1.1) perspective(1000px) rotateX(12deg) rotateY(-24deg) rotate(8deg) translate(-30px,50px)
jaycezhang7890
    79
jaycezhang7890  
   2024-09-13 10:21:00 +08:00
@dbldong 首页这个效果,antd 首页就有这个效果,甚至 antd 还能跟随鼠标晃动
不有有一说一,基本一个人维护很厉害了,而且首页看起来确实很好看,up 主加油
zzfly256
    80
zzfly256  
   2024-09-13 10:33:05 +08:00
耳目一新的感觉;
提个小需求,不知道能否实现:
在表单组件上,下拉选项能支持配后台 API 吗,直接从后端接口取下拉选项的内容
newOpenEyes
    81
newOpenEyes  
   2024-09-13 10:40:57 +08:00
表单引擎中的上传组件样式有问题,会遮挡其他元素
leaveeel
    82
leaveeel  
   2024-09-13 10:44:14 +08:00
支持,我也想过做 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
    83
yelan  
   2024-09-13 10:50:47 +08:00
有一个小建议,image 组件加载失败的提示图片,可以用“裂开”的背景图效果会好一点~
ala2008
    84
ala2008  
   2024-09-13 11:00:32 +08:00
没有布局吗,响应式
hereIsChen
    85
hereIsChen  
   2024-09-13 11:27:43 +08:00
网站首页有点花,至少要把左上角区域标题和开始使用的 2 个按钮区域留出空白
内容斜着加上流水的数字一直再变
看着有点难受
zero3412
    86
zero3412  
   2024-09-13 11:28:15 +08:00
提个小建议,Table 组件比如在“固定行列”时,横向滚动条能否高一些,现在鼠标不容易点中
感觉大部分组件库都有这问题
027creed
    87
027creed  
   2024-09-13 11:32:15 +08:00
表单制作器不错
baihaoyang
    88
baihaoyang  
   2024-09-13 11:39:02 +08:00
UI 很炫酷,微信小程序可以用吗?
mzsongyan
    89
mzsongyan  
   2024-09-13 11:41:10 +08:00
支持,在小项目中用过,很方便,也提过几次 issues ,楼主也很用心的回复了。
目前来说基本可用了,Table 组件表头要是有排序就好了。
memos
    90
memos  
   2024-09-13 11:41:45 +08:00
牛逼
mzsongyan
    91
mzsongyan  
   2024-09-13 11:42:14 +08:00
@zero3412 可能因为滚动条高了就比较难看,我基本都是用 Shift+鼠标滚轮来操作。
rrfeng
    92
rrfeng  
   2024-09-13 11:43:38 +08:00 via Android
手机打开首页。。。一言难尽
userKamtao
    93
userKamtao  
OP
   2024-09-13 11:47:03 +08:00
@ala2008 考虑到组件可能偏后台开发,就没完全适配手机
@zero3412 我忽略了这一点平时都是按住 shift 来左右滚动,我看看怎么优化。
@mzsongyan 这个我最近在完善了,因为需要新增的组件太多了,很多想法堆起来,所以这个需求就 delay 了很久。
@baihaoyang 不支持咧,目前组件就是专注 pc 的后台系统开发
@hereIsChen 不知道是不是屏幕比例问题,其实左上角已经留空了。我看看怎么适配
@yelan 这是个很好的建议,我已经 mark 下来啦
userKamtao
    94
userKamtao  
OP
   2024-09-13 11:49:37 +08:00
@jaycezhang7890 其实我在发布第一个版本的时候,我就用了这个效果,我保证我不是抄他的,嘻嘻~
@zzfly256 这个肯定是支持的,文档有例子
@newOpenEyes 我瞅瞅,还有这种事!
@leaveeel 日期组件这里 还需要完善的东西 太多了,任重道远啊,还要加入时间选择,各种场景,我会努力的!
userKamtao
    95
userKamtao  
OP
   2024-09-13 11:50:19 +08:00
@leaveeel 很开心 收到你这么多的建议 感谢啦
userKamtao
    96
userKamtao  
OP
   2024-09-13 11:55:22 +08:00
@zzfly256 可能例子写的不好,应该单独拎出来,searchMethod 这个方法,就可以传入一个通过接口获取数据的方法,只需要把 options 返回即可。
userKamtao
    97
userKamtao  
OP
   2024-09-13 11:56:06 +08:00
@zzfly256 表单引擎的选项请求的话 还在构思配置的实现方式
mocococ
    98
mocococ  
   2024-09-13 12:06:24 +08:00
色彩搭配,效果 风格感觉可以再改改或者增加一些,个人还是比较喜欢 mui 这种,更加温和的风格

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

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

OP 的 UI 库 看上去很像 ant.design , 但是 功能性组件还是有点少。人少写这种确实比较耗时间。
userKamtao
    99
userKamtao  
OP
   2024-09-13 12:13:17 +08:00
@mocococ 好!你喜欢这种,那我直接抄他的风格。看上去很像 ant ,那我要抄一抄 mui ,把好的抄过来。个人精力很有限,而且应该会越来越多的!
ms2297248353
    100
ms2297248353  
   2024-09-13 13:01:07 +08:00
我是有个需求,我在开发 Halo 插件时,插件用的也是 Vue, 但是因为插件的缘故,官方提供的组件很简单,写起来一点都不顺手。安装 arco 后 vite 自动导入组件,但是最终,样式全部没有。有没有可能组件完全独立化,安装单个组件,可以直接使用,不用全量安装,样式跟随组件走,也不会造成样式丢失的问题。
1  2  
关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2695 人在线   最高记录 6679       Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 31ms UTC 02:27 PVG 10:27 LAX 19:27 JFK 22:27
Do have faith in what you're doing.
ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86