这是一个创建于 225 天前的主题，其中的信息可能已经有所发展或是发生改变。
定义：
- 程序员：只会写代码，不懂设计
- 漂亮的网站：设计比较现代化的，过渡的动画样式比较丰富的
- 个人网站：有高定制性要求的，不适合直接拷贝一个开源方案的
我的情况是 vue 写过一些项目，react 完全没学。后端程序员的个人网站，不是专业前端，不要求商业化级别，但是我十分想把网站做得好看，主页点开看起来各种元素的设计，交互方式都比较现代化的那种感觉，不太想要搞一个打开以后看起来干巴巴的。
但是我也不是学平面设计的，外加实在没有工时，比如说一个按钮写几百行代码，一个人做怕是要累死了。所以感觉路径就是通过使用开源的组件库，人家设计好的样式我去调用这样。不过目前用 vue 的感觉，不论是 vue2 时代还是 vue3 时代，我对 vue3 的功能性倒是没有任何抱怨，我觉得已经足够好用了，但是感觉组件库生态还是很薄弱。常见的一些库，elementplus 我觉得设计得不好看。vuetify 我觉得设计得挺好看的，动画交互比较复杂了，但是我感觉定制性很差啊，很多时候连把元素放到合适的位置和大小都做不到。。
最近也看了很多 v 站发个人网站的，感觉各有各的问题，现在在想是不是换个工具以后开源生态会好不少，就会有那种既有成熟的组件库，也不会定制起来比较难用的？
94 条回复 • 2024-04-26 00:11:02 +08:00
 |
1
chihiro2014 225 天前  2
前端框架和 UI 是两码事。
建议使用 Angular + Flowbite/Tailwind 或者可以看看 uiverse 去看看 |
 |
2
ecnelises 225 天前 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 224 天前 via Android
不是，没有关系，和设计有关
|
 |
43
wujianhua22 224 天前
楼主的目的是要漂亮，然后问哪个框架能够更简单的实现漂亮，我现在告诉你，哪个框架都不能帮你实现更漂亮，想要更漂亮只有设计师才能做的更漂亮。设计实现了，哪个框架都能实现，而且现在的 vue 和 react 都能简单的实现。
|
 |
44
x2ve 224 天前
跟框架无关，复杂的样式要么花时间，要么花时间抄，都是花时间。另外 openui AI 自动生成 ui 界面，你一直描述就完了，估计能满足你要求
|
 |
45
ityspace 224 天前 via Android
Next.js + React 制作个人网站还是挺容易的。
|
 |
46
bryantsuen 224 天前
不懂美工和设计，感觉 react 和 antd 做出来总有种后台控制程序的味道，好奇带设计感的是怎么做的
|
 |
47
brainor 224 天前
看起来推荐 react+next.js 的人挺多的啊
|
 |
49
pianjiao 224 天前
卖坚果的怪叔叔 https://cuixinxin.cn wp 一把梭
|
 |
50
daohanghao 224 天前
|
 |
51
kneo 224 天前 via Android
回答你的问题：不是。
|
 |
52
lookas2001 224 天前 1
是的，react 的生态会略微好一些，在做 markdown 解析器遇到过跟你类似的问题。
|
 |
53
layxy 224 天前
和你用啥前端框架没关系,你的 html+css 基本功扎实,审美没啥问题,用啥框架都能做出来偏亮的网站
|
 |
54
coderhxl 224 天前
想开发漂亮的网站应该考虑 UI 框架吧
|
 |
55
afxcn 224 天前
你可能要找的是 tailwindcss ，已经有好几个人提到这个了。
|
 |
56
hushes 224 天前
|
 |
57
Hopetree 224 天前
如果你的博客主要是当做文档来用，我觉得 vitepress 更适合，没有之一
|
 |
58
helloet 224 天前 1
推上看到的：fuwari.vercel.app ， 感觉还不错
|
 |
60
XCFOX 224 天前 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 224 天前
@LeeReamond 如果只是在现有 UI 库上小改，要么提 PR ，要么自己 fork 一个，都不是什么难事。另外，有点基础直接用原生撸代码效率并不低，ES6 还是很爽的，前期把基础设施（ http 、message 、modal 、form 等）搭好，后期和框架没什么区别了。对于个人网站这个特定的场景来说，交互并不复杂，没那么多增删改查操作，jq 足够了。
|
 |
62
linyongxin 224 天前
主流就是很古老的 php 套 html ，加上个自适应，超低门槛和成本运作了几十年，便宜简单的 lnmp 市场，各种先进前端技术适合炫技。
|
 |
63
laters 224 天前
|
 |
64
fionasit007 224 天前
@jojobo 你这个色调有点东西，一点进去，看到黑色背景和长泽雅美的灰色头像我以为她去世了呢哈哈
|
 |
65
neotheone2333 224 天前
推荐这个 https://nextui.org/ ，挺好看的
|
 |
66
yybhf 224 天前
我用 wordpress
|
 |
67
icoomn 224 天前
|
 |
68
shilianmlxg 224 天前
@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 223 天前
@LeeReamond 兄弟，看看我这 https://blog.2342342.xyz/cn 。用了些动画、鼠标操作也有反馈（不是所有） NextJs+NextUI+tailwindcss+Framer Motion 。顺便给点建议。
|
 |
75
okakuyang 223 天前 via iPhone
是的，react 的库丰富程度完成度比 vue 好很多。虽然主流 ui 库是两者兼有，但是要想好看就不要从主流里选。
|
 |
76
htxy1985 223 天前
@colinsimth 兄弟，好不好看另说，不知道是不是我电脑问题，你这博客感觉有点卡顿啊。
|
|
77
colinsimth 223 天前
@htxy1985 你能看出是页面加载卡，还是页面渲染卡，还是页面切换设计不流畅...？具体那种吗？我好针对性搞搞优化。我这边测试是单页加载不超过 1.5s ，js heap 不超过 80MB, 评论加载确实有点慢
|
|
78
htxy1985 223 天前
@colinsimth 我觉得应该是渲染卡，第一次打开类似于电影卡帧数低那种感觉，停在一个博客上下滑动的时候也能感觉出来。你加了一个加载时候模糊的处理，但这个模糊的效果到正式渲染成功之间偶尔会有卡顿。另外左边的卡片刚渲染出来的时候会抖一下，不确定是不是你故意做的效果。
|
 |
81
xiaohanyu 223 天前 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 223 天前
@htxy1985 谢谢哈。我想个方案，去优化下。
|
|
83
xiaohanyu 223 天前
“过渡的动画样式比较丰富的” 这点其实满难搞的，首先就是 CSS 的过渡（ transition ）和动画（ animation ）的 API 就有一大堆，然后也不太好学；再就是用得太多的话，网站也比较容易卡顿；还有就是，良好设计和规划的过渡和动画是 UX 的事情，程序员自己想出来的往往都是有问题的……这个是蛮专业的领域，大规模的团队是有专门的职位搞过渡和动画的。
建议只有框架内提供的基本的一些过渡和动画，不建议自己搞太多。 我了解到的一个比较好的应用过渡和动画的网站： https://www.relume.io/ 。看一下就知道，没有专业的 UX 团队，靠程序员自己是很难搞出这种效果的了。 |
 |
84
forty 223 天前
1. 找到你要抄的网站
2. 扒它的前端代码以及前端资源 （ css/js/html, 图片,字体等） 3. 什么框架都不需要，pure css/js/html. |
 |
85
kulous 223 天前 via Android
每个程序员的心结吧！其实内容更重要吧！
|
 |
86
minami 223 天前
漂不漂亮主要是审美问题，不是技术问题。。。
|
 |
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 222 天前 via Android
vue3 的 ui 库推荐一个 vuetify ，文档中文也比较全（看了一下，又出了不少新的，该工作了
|
|
91
LeeReamond OP @xubeiyan vuetify 部分样式和 tailwindcss 冲突
|
|
92
xiaohanyu 222 天前 1
@LeeReamond 还是不容易的，因为 motion 是个动态的东西，你去趴别的人网站，看别人的实现，然后来实现自己的，相当于，给你一堆食材，让你自己做顿美味，如果你没有经验的话，不容易。很多 motion 的设置其实并不是 linear 的值。
专业团队有专门做 motion design 的（算是 UX 下面一个很重要的分支），具体你可以搜下这种岗位的需求。 开源实现方面，可以看下 neon database 的网站： https://github.com/neondatabase/website 。 供参考哈。 |
|
93
xubeiyan 222 天前 via Android
@LeeReamond vuetify3 有工具类（实际上和 tailwindcss 只有个别区别），看了下你的要求，其实直接用 tailwindcss 写就行了，这些 UI 框架比 tailwindcss 都要封装得更多一些，换来的是你得用他的组件库
|
|
94
LeeReamond OP @xubeiyan tailwind 我个人感觉用起来感觉是打补丁方便。比如要一个卡片，组件库里没有的样式，用 tailwind 分分钟可以撸出来一个完成度 80%的。但是如果一切从零开始搞，那所有组件都是 80%完成度，合到一起效果就比较菜了。。。
|
Select Language