定义:
我的情况是 vue 写过一些项目,react 完全没学。后端程序员的个人网站,不是专业前端,不要求商业化级别,但是我十分想把网站做得好看,主页点开看起来各种元素的设计,交互方式都比较现代化的那种感觉,不太想要搞一个打开以后看起来干巴巴的。
但是我也不是学平面设计的,外加实在没有工时,比如说一个按钮写几百行代码,一个人做怕是要累死了。所以感觉路径就是通过使用开源的组件库,人家设计好的样式我去调用这样。不过目前用 vue 的感觉,不论是 vue2 时代还是 vue3 时代,我对 vue3 的功能性倒是没有任何抱怨,我觉得已经足够好用了,但是感觉组件库生态还是很薄弱。常见的一些库,elementplus 我觉得设计得不好看。vuetify 我觉得设计得挺好看的,动画交互比较复杂了,但是我感觉定制性很差啊,很多时候连把元素放到合适的位置和大小都做不到。。
最近也看了很多 v 站发个人网站的,感觉各有各的问题,现在在想是不是换个工具以后开源生态会好不少,就会有那种既有成熟的组件库,也不会定制起来比较难用的?
1
chihiro2014 224 天前 2
前端框架和 UI 是两码事。
建议使用 Angular + Flowbite/Tailwind 或者可以看看 uiverse 去看看 |
2
ecnelises 224 天前 1
个人网站为什么要纠结 React 还是 Vue ?如果你的网站一没有复杂的交互,二只有一个人开发,三需要快速简洁,用这几个框架(也包括 ng )就是本末倒置,杀鸡用牛刀。如果你是一个专业前端,对某个框架非常熟悉,出于习惯用它写个人网站没啥问题,但 OP 不是这种情况。
以前的人用 jQuery 是因为浏览器普遍兼容性特别差,jQuery 能够抹平很多浏览器兼容性问题。现在 2024 年了,主流浏览器( Safari 、Firefox 、Chrome 、Edge )可以放心使用现代 API 。个人网站以内容为主,不需要多少 JS ,你说的 Vue 、React 这些东西本身也没法帮你解决动画这些问题,反倒几行 CSS 就能搞定。 如果你不想写 CSS ,也有 Tailwind 这种东西,让 GPT 生成一组用 Tailwind 的 HTML ,自己改改就能上线,用前端框架说不定还在折腾工具链。 |
3
chihiro2014 224 天前
@ecnelises angular 天生适合写原生 html 和 css 。搭配 tailwind 薄纱 react 和 vue 。。。没用过别乱说。顺带 Flowbite 是在 tailwind 基础上二次封装
|
4
DeWjjj 224 天前
考虑到学习成本直接 vue+nuxtui(base tailwindcss),可以让你获得快乐。
不谈爆傻,vuejs 让你写起来不像前端,光是这个从学习角度就非常乐呵了。 |
5
LeeReamond OP @DeWjjj
@ecnelises 主要问题是啥呢,楼上三个老哥回帖,只有一楼老哥是看完我问的啥再回帖的。我说我对 vue3 的功能性没有任何抱怨,但是是不是 react 的生态能写的漂亮,然后一个老哥说你纠结个什么语言,一个老哥说 vue 写起来学习成本低,我一脸问号,我也没说这个啊。 @chihiro2014 听起来很棒,但是感觉用 angular 不太符合现在需求,写网站写的好看是一半需求,另外一半需求可能说这个语言或者技术有外溢价值。vue 和 react 都有一定的外溢价值,起码 vue 简单么,react 找工作通用,虽然我不一定找这个工作。相比之下我感觉现在其他东西是不太符外溢性的。 |
6
fuyun 224 天前
框架是解决工程问题,UI 才是你说的设计问题,而交互问题是 UE/UX 范畴,不是一个概念。
各大框架的技术栈都有相应的 UI 库,现在用的多的是 antd 系列,但不适合你说的个人网站。而且本身 UI 库和个性化就是冲突的,UI 库的出发点就是解决通用性的设计问题,减少重复劳动。你要说方便定制化的,那肯定是原生 JS 或 jQuery 生态。 ps.自己刚好在重构(重写)网站,放弃了 Angular 之上的 SSR 方案,选择原生+jQuery 方式,UI 采用自定义+Bootstrap 定制,毕竟如你所说,2C 的网站定制化程度太高,已经不适合框架和 UI 库了…… |
7
LeeReamond OP @fuyun 感觉 JQuery 相较于 mvvm 框架来说生产力还是太低了,自定义 Bootstrap 我没接触过,不知道是直接使用别人的开源产品还是需要自己写,如果需要自己写感觉虽然有完全掌控力,但是实在是太累了,没有设计学知识做出来也很难好看。
不过其实这些组件库,说到底也不需要有多高的定制性,我只是感觉像什么大小,位置之类的不要说全程都必须用你的组件库内部元素才能生效,外部加个自定义 div 之类的样式传导就会出现 bug |
8
kongkx 224 天前 via Android
headless ui 这种思路可以看看。
现在基于 tailwind 的样式库真的多。 另外 alpine + tailwind 后端输出页面,小交互写起来也很爽的。 |
9
murmur 224 天前 4
用样式库就和漂亮没关了,你需要美工、设计师
|
10
Amose2024 224 天前
React 和 Vue 都是前端框架,通常情况下彼此都能相互实现的,用这用那,其实没什么本质区别,不用纠结,熟悉哪个就用哪个。CSS 找漂亮的模板学着改改,也差不多能定制了。找不到,再找人推荐推荐,也问题不大。
|
11
ZGame 224 天前
@LeeReamond #7 一个网页 c 端,需要多重...
|
12
dj721xHiAvbL11n0 224 天前
要不你去 Astro 官网看看他们官方的 Theme ,很不错
blog.ll1025.cn 就是基于里面某个主题改了一些 |
13
jojobo 224 天前 2
贴个自己的个人网站: https://azhubaby.com
自己设计的才好看,目前我也重构了自己的个人网站,这一版换掉 tailwindcss 的样式,改用 shadcnUI ,怎么说呢,就自己折腾吧,看到好看的就改,也不知道重构几回了 |
14
wolfan 224 天前
apline.js 你值得拥有。
|
15
LeeReamond OP @jojobo 你这个就是我感觉典型廉价满满的那种设计
我倒不是说老哥做的不好,个人网站怎么喜欢怎么来就行。只是说在一种体现商业“高级感”的目的来说,你这个按钮连按下后的响应都没有的,hover 状态和按下状态没有任何区别。相较于人家那种设定过动画弹力曲线的,让人感觉按下去就很 Q 弹的,然后比如按下之后颜色变化逐帧看是有涟漪展开的那种,这种细节特别出质感,你这个相对来说就是白板了。 |
16
bianhui 224 天前
用原生,jquery 也能写出漂亮的网站。而且对于美认定很难。千万级保时捷设计师设计出来的车也不是所有人都觉得美。所以你可以尝试抄一些好看的网站
|
17
caixiaomao 224 天前
感觉 react 的 ui 库更丰富一点
|
18
flytsuki 224 天前
漂亮网站需要 ui 和学好 css ,哪怕你用 jquery 都能做好看
|
19
Quetalocatl 224 天前 via iPhone
建議樓主先去學習一下 figma
|
20
Track13 224 天前
好看请找 css ,交互请找 js 。你在这比较 vue 和 react 有什么意思?还是你想问那边生态的 ui 库更好看?
|
21
del1214 224 天前
wordpress 了解一下
|
22
LuckyLauncher 224 天前
@LeeReamond #15 这是你个人喜好吧,只是你喜欢这样的,事实是很多成功的商业产品都没这个设计
|
23
zwjsoftx 224 天前
用 react 会比 vue 简单一些,这个不知道。如果想网站漂亮一些,就去好看的网站扒下来,只要 html css js 然后自己写后端。我就是这么干的。请参考 https://www.qiaoran.net
|
24
wu67 224 天前
建议 react+antd.
element-p 我都不知道怎么吐槽好, 只能说作为用户用着确实非常不舒心, 但作为开发者我也没法苛责什么, 人家开源用爱发电的而已 |
25
LuckyLauncher 224 天前 1
@LeeReamond #15 但凡你稍微百度一下,你这所谓的高级感可以看做是 Material Design 风格的一部分,与之相对的是扁平化的设计风格,其主张去除这些装饰元素,只是不同的设计风格罢了。我觉得你应该去学设计而不是前端
|
26
Ayanokouji 224 天前
个人觉得,react 的组件库比 vue 的组件库多,而且 ui 风格也比较多
|
27
xubingok 224 天前
漂不漂亮,不取决于 react 还是 vue....取决于你用的组件库...
|
28
yichengxian 224 天前
jq+bootstrap 🙃
|
29
jojobo 224 天前
@LeeReamond #15 我这个网站 hover 状态是有变化的呀,只是没有你说的动力弹力曲线。但是我背景也加入了粒子,俺感觉也蛮好看的。你说的那种高级感的网站有没有,贴几个让我参考参考
|
30
flmn 224 天前
漂亮不漂亮和用哪个组件库没关系。
如果是个人爱好,React 的生态比 Vue 要丰富一些,建议 React 。 |
31
jguo 224 天前
漂亮的关键在设计。不懂设计再好的组件库也救不回来,直接用 wordpress 吧。
|
32
horizon 224 天前
react
组件库丰富 |
33
june4 224 天前 2
现在的前端库都搞反应式,就 react 不是,个人觉得 react 有点落后了,心智负担是最大的
我用过几年 react ,现在个人项目用的 solid-js |
34
xiaochong0302 224 天前
还在折腾这些花里胡哨的东西吗,看来 UP 现在还很能打呀,哈哈!
|
35
MENGKE 224 天前
我认为 next.js 比 react 更适合一点,一些简单的接口、或者做一下简单的处理 不需要再单独起其他的项目。
可以看下我的:mengke.me 源码:github.com/mk965/mengke.me |
36
zjhzxhz 224 天前
个人主页感觉还是用静态 Blog 框架( Hugo ,Hexo )+ Theme 会更方便?
Homepage: https://haozhexie.com Theme: https://gitlab.com/hzxie/citrus-glow |
37
guguji5 224 天前
推荐 hugo ,别自己搞
|
38
LavaC 224 天前
要样式好看跟 vue 、react 没关系的,首先得有个好看的设计稿,然后才是选择用什么技术。
倒是有些库基本是必选的那就是动画库,GSAP ,animejs 、animatecss ,诸如此类,替换掉默认的 ease 、linear 曲线观感就已经有很大不同了。 |
39
huijiewei 224 天前
漂亮和什么框架无关。和设计有关
|
40
laobobo 224 天前
这和框架没有一毛钱关系,说道理还是 html+css+js, 想要漂亮找 UI 设计
|
41
pdone 224 天前
请参考我的博客 https://awaw.cc
用 hexo 或者 hugo 之类的就可以了 没必要自己再造个轮子啦 |
42
renmu 223 天前 via Android
不是,没有关系,和设计有关
|
43
wujianhua22 223 天前
楼主的目的是要漂亮,然后问哪个框架能够更简单的实现漂亮,我现在告诉你,哪个框架都不能帮你实现更漂亮,想要更漂亮只有设计师才能做的更漂亮。设计实现了,哪个框架都能实现,而且现在的 vue 和 react 都能简单的实现。
|
44
x2ve 223 天前
跟框架无关,复杂的样式要么花时间,要么花时间抄,都是花时间。另外 openui AI 自动生成 ui 界面,你一直描述就完了,估计能满足你要求
|
45
ityspace 223 天前 via Android
Next.js + React 制作个人网站还是挺容易的。
|
46
bryantsuen 223 天前
不懂美工和设计,感觉 react 和 antd 做出来总有种后台控制程序的味道,好奇带设计感的是怎么做的
|
47
brainor 223 天前
看起来推荐 react+next.js 的人挺多的啊
|
49
pianjiao 223 天前
卖坚果的怪叔叔 https://cuixinxin.cn wp 一把梭
|
50
daohanghao 223 天前
|
51
kneo 223 天前 via Android
回答你的问题:不是。
|
52
lookas2001 223 天前 1
是的,react 的生态会略微好一些,在做 markdown 解析器遇到过跟你类似的问题。
|
53
layxy 223 天前
和你用啥前端框架没关系,你的 html+css 基本功扎实,审美没啥问题,用啥框架都能做出来偏亮的网站
|
54
coderhxl 223 天前
想开发漂亮的网站应该考虑 UI 框架吧
|
55
afxcn 223 天前
你可能要找的是 tailwindcss ,已经有好几个人提到这个了。
|
56
hushes 223 天前
|
57
Hopetree 223 天前
如果你的博客主要是当做文档来用,我觉得 vitepress 更适合,没有之一
|
58
helloet 223 天前 1
推上看到的:fuwari.vercel.app , 感觉还不错
|
60
XCFOX 223 天前 2
React 的 UI 组件库生态比 VUE 要丰富太多,从这方面讲确实用 React 开发漂亮网站要简单一些。
React 好看的组件库有: https://nextui.org/ https://v2.chakra-ui.com/ https://mui.com/material-ui/ https://ui.shadcn.com/ https://semi.design/zh-CN Vue 好看的组件库: https://www.naiveui.com/ https://ui.nuxt.com/ |
61
fuyun 223 天前
@LeeReamond 如果只是在现有 UI 库上小改,要么提 PR ,要么自己 fork 一个,都不是什么难事。另外,有点基础直接用原生撸代码效率并不低,ES6 还是很爽的,前期把基础设施( http 、message 、modal 、form 等)搭好,后期和框架没什么区别了。对于个人网站这个特定的场景来说,交互并不复杂,没那么多增删改查操作,jq 足够了。
|
62
linyongxin 223 天前
主流就是很古老的 php 套 html ,加上个自适应,超低门槛和成本运作了几十年,便宜简单的 lnmp 市场,各种先进前端技术适合炫技。
|
63
laters 223 天前
|
64
fionasit007 223 天前
@jojobo 你这个色调有点东西,一点进去,看到黑色背景和长泽雅美的灰色头像我以为她去世了呢哈哈
|
65
neotheone2333 223 天前
推荐这个 https://nextui.org/ ,挺好看的
|
66
yybhf 223 天前
我用 wordpress
|
67
icoomn 223 天前
|
68
shilianmlxg 223 天前
@neotheone2333 大佬 nextui-pro 值得购买吗,看到最近有开车
|
70
xmagicer 223 天前
|
71
LeeReamond OP @XCFOX 感谢 1/70 的有效回复,shadcn 似乎是直接用 tailwindcss 写的?不过感觉有点素。这七八个网站里有两三个的按钮我点下去是没有任何反馈的,包括 shadcn ,不知道是咋回事。我是希望写网站的时候能直接用三方组件+tailwindcss ,还不会互相冲突的。
|
72
qweruiop 223 天前
用 react 吧,买个模版,开始改。。。模版库比 vue 多太多了。。。
当然要纯手写,那就都无所谓了。。。 |
73
xitler 223 天前
看看 GSAP ?
|
74
colinsimth 222 天前
@LeeReamond 兄弟,看看我这 https://blog.2342342.xyz/cn 。用了些动画、鼠标操作也有反馈(不是所有) NextJs+NextUI+tailwindcss+Framer Motion 。顺便给点建议。
|
75
okakuyang 222 天前 via iPhone
是的,react 的库丰富程度完成度比 vue 好很多。虽然主流 ui 库是两者兼有,但是要想好看就不要从主流里选。
|
76
htxy1985 222 天前
@colinsimth 兄弟,好不好看另说,不知道是不是我电脑问题,你这博客感觉有点卡顿啊。
|
77
colinsimth 222 天前
@htxy1985 你能看出是页面加载卡,还是页面渲染卡,还是页面切换设计不流畅...?具体那种吗?我好针对性搞搞优化。我这边测试是单页加载不超过 1.5s ,js heap 不超过 80MB, 评论加载确实有点慢
|
78
htxy1985 222 天前
@colinsimth 我觉得应该是渲染卡,第一次打开类似于电影卡帧数低那种感觉,停在一个博客上下滑动的时候也能感觉出来。你加了一个加载时候模糊的处理,但这个模糊的效果到正式渲染成功之间偶尔会有卡顿。另外左边的卡片刚渲染出来的时候会抖一下,不确定是不是你故意做的效果。
|
81
xiaohanyu 222 天前 2
总体上讲,react 的 UI 库选择还是比 vue 要丰富多了,不过学习成本是比较高的,如果只是做个静态的 landing page 或者交互性不多的网站,传统的 jQuery 方案,以及基于 jQuery 的各种 UI 库( Bootstrap 之类)就是成本最低的选择,简单+容易上手+海量的模板选择。
Tailwind CSS 写起来比较快,不过项目规模大的话,几十个 class 写在一起,很难维护的。 程序员自己搞网站,没有设计师的话,注意 font/spacing/grid/color pattern 这几个基本点,保证全站的统一,然后不要引入太花哨的东西,再参考已有的一些设计,基本上是可以搞出一个及格的设计的。Tailwind 作者有本叫 refactoring UI 的书,写得蛮好的,可以参考下。 我自己用 react UI 库( https://mantine.dev/)写的 SaaS: https://ppresume.com/ ,一个基于 LaTeX 的简历生成器。自认为还是做到了“简单”、“好看”的标准的。 [讨论]( https://v2ex.com/t/1030970) 仅供参考哈。 |
82
colinsimth 222 天前
@htxy1985 谢谢哈。我想个方案,去优化下。
|
83
xiaohanyu 222 天前
“过渡的动画样式比较丰富的” 这点其实满难搞的,首先就是 CSS 的过渡( transition )和动画( animation )的 API 就有一大堆,然后也不太好学;再就是用得太多的话,网站也比较容易卡顿;还有就是,良好设计和规划的过渡和动画是 UX 的事情,程序员自己想出来的往往都是有问题的……这个是蛮专业的领域,大规模的团队是有专门的职位搞过渡和动画的。
建议只有框架内提供的基本的一些过渡和动画,不建议自己搞太多。 我了解到的一个比较好的应用过渡和动画的网站: https://www.relume.io/ 。看一下就知道,没有专业的 UX 团队,靠程序员自己是很难搞出这种效果的了。 |
84
forty 222 天前
1. 找到你要抄的网站
2. 扒它的前端代码以及前端资源 ( css/js/html, 图片,字体等) 3. 什么框架都不需要,pure css/js/html. |
85
kulous 222 天前 via Android
每个程序员的心结吧!其实内容更重要吧!
|
86
minami 222 天前
漂不漂亮主要是审美问题,不是技术问题。。。
|
87
dedad558 222 天前
水个个人网站广告吧, https://cpcagu.com
vue3+纯 CSS 写的, 界面算丑还是漂亮? 还是中规中矩, |
88
LeeReamond OP @xiaohanyu 确实,relume 这个网站的动画几乎就是想要的高级感了,感觉调教很用心。我是想如果有开源框架能实现基础的 UI 组件层面的互动动画,再加上程序员自己定制 landing page 上面的一些显示动画,能不能做到类似效果
|
89
devwolf 222 天前
op 问是否简单,应该是想了解 react 和 vue 两派 ui 库的丰富程度吧?
|
90
xubeiyan 221 天前 via Android
vue3 的 ui 库推荐一个 vuetify ,文档中文也比较全(看了一下,又出了不少新的,该工作了
|
91
LeeReamond OP @xubeiyan vuetify 部分样式和 tailwindcss 冲突
|
92
xiaohanyu 221 天前 1
@LeeReamond 还是不容易的,因为 motion 是个动态的东西,你去趴别的人网站,看别人的实现,然后来实现自己的,相当于,给你一堆食材,让你自己做顿美味,如果你没有经验的话,不容易。很多 motion 的设置其实并不是 linear 的值。
专业团队有专门做 motion design 的(算是 UX 下面一个很重要的分支),具体你可以搜下这种岗位的需求。 开源实现方面,可以看下 neon database 的网站: https://github.com/neondatabase/website 。 供参考哈。 |
93
xubeiyan 221 天前 via Android
@LeeReamond vuetify3 有工具类(实际上和 tailwindcss 只有个别区别),看了下你的要求,其实直接用 tailwindcss 写就行了,这些 UI 框架比 tailwindcss 都要封装得更多一些,换来的是你得用他的组件库
|
94
LeeReamond OP @xubeiyan tailwind 我个人感觉用起来感觉是打补丁方便。比如要一个卡片,组件库里没有的样式,用 tailwind 分分钟可以撸出来一个完成度 80%的。但是如果一切从零开始搞,那所有组件都是 80%完成度,合到一起效果就比较菜了。。。
|