程序员想开发漂亮的个人网站是不是用 react 会比 vue 简单一些？

[LeeReamond]

定义：

• 程序员：只会写代码，不懂设计
• 漂亮的网站：设计比较现代化的，过渡的动画样式比较丰富的
• 个人网站：有高定制性要求的，不适合直接拷贝一个开源方案的

我的情况是 vue 写过一些项目，react 完全没学。后端程序员的个人网站，不是专业前端，不要求商业化级别，但是我十分想把网站做得好看，主页点开看起来各种元素的设计，交互方式都比较现代化的那种感觉，不太想要搞一个打开以后看起来干巴巴的。

但是我也不是学平面设计的，外加实在没有工时，比如说一个按钮写几百行代码，一个人做怕是要累死了。所以感觉路径就是通过使用开源的组件库，人家设计好的样式我去调用这样。不过目前用 vue 的感觉，不论是 vue2 时代还是 vue3 时代，我对 vue3 的功能性倒是没有任何抱怨，我觉得已经足够好用了，但是感觉组件库生态还是很薄弱。常见的一些库，elementplus 我觉得设计得不好看。vuetify 我觉得设计得挺好看的，动画交互比较复杂了，但是我感觉定制性很差啊，很多时候连把元素放到合适的位置和大小都做不到。。

最近也看了很多 v 站发个人网站的，感觉各有各的问题，现在在想是不是换个工具以后开源生态会好不少，就会有那种既有成熟的组件库，也不会定制起来比较难用的？

[chihiro2014]

前端框架和 UI 是两码事。
建议使用 Angular + Flowbite/Tailwind
或者可以看看 uiverse 去看看

[ecnelises]

个人网站为什么要纠结 React 还是 Vue ？如果你的网站一没有复杂的交互，二只有一个人开发，三需要快速简洁，用这几个框架（也包括 ng ）就是本末倒置，杀鸡用牛刀。如果你是一个专业前端，对某个框架非常熟悉，出于习惯用它写个人网站没啥问题，但 OP 不是这种情况。

以前的人用 jQuery 是因为浏览器普遍兼容性特别差，jQuery 能够抹平很多浏览器兼容性问题。现在 2024 年了，主流浏览器（ Safari 、Firefox 、Chrome 、Edge ）可以放心使用现代 API 。个人网站以内容为主，不需要多少 JS ，你说的 Vue 、React 这些东西本身也没法帮你解决动画这些问题，反倒几行 CSS 就能搞定。

如果你不想写 CSS ，也有 Tailwind 这种东西，让 GPT 生成一组用 Tailwind 的 HTML ，自己改改就能上线，用前端框架说不定还在折腾工具链。

[chihiro2014]

@ecnelises angular 天生适合写原生 html 和 css 。搭配 tailwind 薄纱 react 和 vue 。。。没用过别乱说。顺带 Flowbite 是在 tailwind 基础上二次封装

[DeWjjj]

考虑到学习成本直接 vue+nuxtui(base tailwindcss)，可以让你获得快乐。
不谈爆傻，vuejs 让你写起来不像前端，光是这个从学习角度就非常乐呵了。

[LeeReamond]

@DeWjjj
@ecnelises 主要问题是啥呢，楼上三个老哥回帖，只有一楼老哥是看完我问的啥再回帖的。我说我对 vue3 的功能性没有任何抱怨，但是是不是 react 的生态能写的漂亮，然后一个老哥说你纠结个什么语言，一个老哥说 vue 写起来学习成本低，我一脸问号，我也没说这个啊。

@chihiro2014 听起来很棒，但是感觉用 angular 不太符合现在需求，写网站写的好看是一半需求，另外一半需求可能说这个语言或者技术有外溢价值。vue 和 react 都有一定的外溢价值，起码 vue 简单么，react 找工作通用，虽然我不一定找这个工作。相比之下我感觉现在其他东西是不太符外溢性的。

[fuyun]

框架是解决工程问题，UI 才是你说的设计问题，而交互问题是 UE/UX 范畴，不是一个概念。
各大框架的技术栈都有相应的 UI 库，现在用的多的是 antd 系列，但不适合你说的个人网站。而且本身 UI 库和个性化就是冲突的，UI 库的出发点就是解决通用性的设计问题，减少重复劳动。你要说方便定制化的，那肯定是原生 JS 或 jQuery 生态。
ps.自己刚好在重构（重写）网站，放弃了 Angular 之上的 SSR 方案，选择原生+jQuery 方式，UI 采用自定义+Bootstrap 定制，毕竟如你所说，2C 的网站定制化程度太高，已经不适合框架和 UI 库了……

[LeeReamond]

@fuyun 感觉 JQuery 相较于 mvvm 框架来说生产力还是太低了，自定义 Bootstrap 我没接触过，不知道是直接使用别人的开源产品还是需要自己写，如果需要自己写感觉虽然有完全掌控力，但是实在是太累了，没有设计学知识做出来也很难好看。

不过其实这些组件库，说到底也不需要有多高的定制性，我只是感觉像什么大小，位置之类的不要说全程都必须用你的组件库内部元素才能生效，外部加个自定义 div 之类的样式传导就会出现 bug

[kongkx]

headless ui 这种思路可以看看。

现在基于 tailwind 的样式库真的多。

另外 alpine + tailwind 后端输出页面，小交互写起来也很爽的。

[murmur]

用样式库就和漂亮没关了，你需要美工、设计师

[Amose2024]

React 和 Vue 都是前端框架，通常情况下彼此都能相互实现的，用这用那，其实没什么本质区别，不用纠结，熟悉哪个就用哪个。CSS 找漂亮的模板学着改改，也差不多能定制了。找不到，再找人推荐推荐，也问题不大。

[ZGame]

@LeeReamond #7 一个网页 c 端,需要多重...

[dj721xHiAvbL11n0]

要不你去 Astro 官网看看他们官方的 Theme ，很不错
blog.ll1025.cn 就是基于里面某个主题改了一些

[jojobo]

贴个自己的个人网站： https://azhubaby.com
自己设计的才好看，目前我也重构了自己的个人网站，这一版换掉 tailwindcss 的样式，改用 shadcnUI ，怎么说呢，就自己折腾吧，看到好看的就改，也不知道重构几回了

[wolfan]

apline.js 你值得拥有。

[LeeReamond]

@jojobo 你这个就是我感觉典型廉价满满的那种设计

我倒不是说老哥做的不好，个人网站怎么喜欢怎么来就行。只是说在一种体现商业“高级感”的目的来说，你这个按钮连按下后的响应都没有的，hover 状态和按下状态没有任何区别。相较于人家那种设定过动画弹力曲线的，让人感觉按下去就很 Q 弹的，然后比如按下之后颜色变化逐帧看是有涟漪展开的那种，这种细节特别出质感，你这个相对来说就是白板了。

[bianhui]

用原生，jquery 也能写出漂亮的网站。而且对于美认定很难。千万级保时捷设计师设计出来的车也不是所有人都觉得美。所以你可以尝试抄一些好看的网站

[caixiaomao]

感觉 react 的 ui 库更丰富一点

[flytsuki]

漂亮网站需要 ui 和学好 css ，哪怕你用 jquery 都能做好看

[Quetalocatl]

建議樓主先去學習一下 figma

[Track13]

好看请找 css ，交互请找 js 。你在这比较 vue 和 react 有什么意思？还是你想问那边生态的 ui 库更好看？

[del1214]

wordpress 了解一下

[LuckyLauncher]

@LeeReamond #15 这是你个人喜好吧，只是你喜欢这样的，事实是很多成功的商业产品都没这个设计

[zwjsoftx]

用 react 会比 vue 简单一些,这个不知道。如果想网站漂亮一些，就去好看的网站扒下来，只要 html css js 然后自己写后端。我就是这么干的。请参考 https://www.qiaoran.net

[wu67]

建议 react+antd.
element-p 我都不知道怎么吐槽好, 只能说作为用户用着确实非常不舒心, 但作为开发者我也没法苛责什么, 人家开源用爱发电的而已

[LuckyLauncher]

@LeeReamond #15 但凡你稍微百度一下，你这所谓的高级感可以看做是 Material Design 风格的一部分，与之相对的是扁平化的设计风格，其主张去除这些装饰元素，只是不同的设计风格罢了。我觉得你应该去学设计而不是前端

[Ayanokouji]

个人觉得，react 的组件库比 vue 的组件库多，而且 ui 风格也比较多

[xubingok]

漂不漂亮,不取决于 react 还是 vue....取决于你用的组件库...

[yichengxian]

jq+bootstrap 🙃

[jojobo]

@LeeReamond #15 我这个网站 hover 状态是有变化的呀，只是没有你说的动力弹力曲线。但是我背景也加入了粒子，俺感觉也蛮好看的。你说的那种高级感的网站有没有，贴几个让我参考参考

[flmn]

漂亮不漂亮和用哪个组件库没关系。

如果是个人爱好，React 的生态比 Vue 要丰富一些，建议 React 。

[jguo]

漂亮的关键在设计。不懂设计再好的组件库也救不回来，直接用 wordpress 吧。

[horizon]

react
组件库丰富

[june4]

现在的前端库都搞反应式，就 react 不是，个人觉得 react 有点落后了，心智负担是最大的
我用过几年 react ，现在个人项目用的 solid-js

[xiaochong0302]

还在折腾这些花里胡哨的东西吗，看来 UP 现在还很能打呀，哈哈！

[MENGKE]

我认为 next.js 比 react 更适合一点，一些简单的接口、或者做一下简单的处理 不需要再单独起其他的项目。

可以看下我的：mengke.me 源码：github.com/mk965/mengke.me

[zjhzxhz]

个人主页感觉还是用静态 Blog 框架（ Hugo ，Hexo ）+ Theme 会更方便？

Homepage： https://haozhexie.com
Theme： https://gitlab.com/hzxie/citrus-glow

[guguji5]

推荐 hugo ，别自己搞

[LavaC]

要样式好看跟 vue 、react 没关系的，首先得有个好看的设计稿，然后才是选择用什么技术。
倒是有些库基本是必选的那就是动画库，GSAP ，animejs 、animatecss ，诸如此类，替换掉默认的 ease 、linear 曲线观感就已经有很大不同了。

[huijiewei]

漂亮和什么框架无关。和设计有关

[4Et5ShxMIq58n6Lr]

这和框架没有一毛钱关系，说道理还是 html+css+js, 想要漂亮找 UI 设计

[pdone]

请参考我的博客 https://awaw.cc
用 hexo 或者 hugo 之类的就可以了 没必要自己再造个轮子啦

[renmu]

不是，没有关系，和设计有关

[wujianhua22]

楼主的目的是要漂亮，然后问哪个框架能够更简单的实现漂亮，我现在告诉你，哪个框架都不能帮你实现更漂亮，想要更漂亮只有设计师才能做的更漂亮。设计实现了，哪个框架都能实现，而且现在的 vue 和 react 都能简单的实现。

[x2ve]

跟框架无关，复杂的样式要么花时间，要么花时间抄，都是花时间。另外 openui AI 自动生成 ui 界面，你一直描述就完了，估计能满足你要求

[ityspace]

Next.js + React 制作个人网站还是挺容易的。

[bryantsuen]

不懂美工和设计，感觉 react 和 antd 做出来总有种后台控制程序的味道，好奇带设计感的是怎么做的

[brainor]

看起来推荐 react+next.js 的人挺多的啊

[ityspace]

@brainor 好用。坏处是额外的 JS 文件就有 60kb 多。不过优化好的话，界面可以秒开，无感刷新体验甚至比纯静态网站丝滑。

[pianjiao]

卖坚果的怪叔叔 https://cuixinxin.cn wp 一把梭

[daohanghao]

不会设计的话

还不如用现成的 WordPress 或 typecho ，主题又多。

https://www.91es.com/

[kneo]

回答你的问题：不是。

[lookas2001]

是的，react 的生态会略微好一些，在做 markdown 解析器遇到过跟你类似的问题。

[layxy]

和你用啥前端框架没关系,你的 html+css 基本功扎实,审美没啥问题,用啥框架都能做出来偏亮的网站

[coderhxl]

想开发漂亮的网站应该考虑 UI 框架吧

[afxcn]

你可能要找的是 tailwindcss ，已经有好几个人提到这个了。

[hushes]

这就的看自己的想法和构思了
顺便贴一个我自己的

博客： https://blog.hushes.cn/
博客模板： https://github.com/Jiohon/blog-example

[Hopetree]

如果你的博客主要是当做文档来用，我觉得 vitepress 更适合，没有之一

[helloet]

推上看到的：fuwari.vercel.app ， 感觉还不错

[jqtmviyu]

@jojobo #29 背景特效不好看呀. 除了让风扇转得快点,.

[XCFOX]

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/

[fuyun]

@LeeReamond 如果只是在现有 UI 库上小改，要么提 PR ，要么自己 fork 一个，都不是什么难事。另外，有点基础直接用原生撸代码效率并不低，ES6 还是很爽的，前期把基础设施（ http 、message 、modal 、form 等）搭好，后期和框架没什么区别了。对于个人网站这个特定的场景来说，交互并不复杂，没那么多增删改查操作，jq 足够了。

[linyongxin]

主流就是很古老的 php 套 html ，加上个自适应，超低门槛和成本运作了几十年，便宜简单的 lnmp 市场，各种先进前端技术适合炫技。

[laters]

https://www.naiveui.com/

[fionasit007]

@jojobo 你这个色调有点东西，一点进去，看到黑色背景和长泽雅美的灰色头像我以为她去世了呢哈哈

[neotheone2333]

推荐这个 https://nextui.org/ ，挺好看的

[yybhf]

我用 wordpress

[hjMK5OXQVSr8DflD]

@pianjiao 换个友链？

我又来厚着脸皮贴自己的博客了 https://yanyunfeng.com

[shilianmlxg]

@neotheone2333 大佬 nextui-pro 值得购买吗，看到最近有开车

[kamal]

@june4 #32 solid js 看起来不错，感谢推荐

[xmagicer]

作为一个非 Web 玩家，我更喜欢简单直接、略微锐利一点的 UI ，不太喜欢有比较多过渡动画、看起来软绵绵的 UI 设计。

https://xmagicer.com/

[LeeReamond]

@XCFOX 感谢 1/70 的有效回复，shadcn 似乎是直接用 tailwindcss 写的？不过感觉有点素。这七八个网站里有两三个的按钮我点下去是没有任何反馈的，包括 shadcn ，不知道是咋回事。我是希望写网站的时候能直接用三方组件+tailwindcss ，还不会互相冲突的。

[qweruiop]

用 react 吧，买个模版，开始改。。。模版库比 vue 多太多了。。。
当然要纯手写，那就都无所谓了。。。

[xitler]

看看 GSAP ？

[colinsimth]

@LeeReamond 兄弟，看看我这 https://blog.2342342.xyz/cn 。用了些动画、鼠标操作也有反馈（不是所有） NextJs+NextUI+tailwindcss+Framer Motion 。顺便给点建议。

[okakuyang]

是的，react 的库丰富程度完成度比 vue 好很多。虽然主流 ui 库是两者兼有，但是要想好看就不要从主流里选。

[htxy1985]

@colinsimth 兄弟，好不好看另说，不知道是不是我电脑问题，你这博客感觉有点卡顿啊。

[colinsimth]

@htxy1985 你能看出是页面加载卡，还是页面渲染卡，还是页面切换设计不流畅...？具体那种吗？我好针对性搞搞优化。我这边测试是单页加载不超过 1.5s ，js heap 不超过 80MB, 评论加载确实有点慢

[htxy1985]

@colinsimth 我觉得应该是渲染卡，第一次打开类似于电影卡帧数低那种感觉，停在一个博客上下滑动的时候也能感觉出来。你加了一个加载时候模糊的处理，但这个模糊的效果到正式渲染成功之间偶尔会有卡顿。另外左边的卡片刚渲染出来的时候会抖一下，不确定是不是你故意做的效果。

[bubble21]

@htxy1985 应该是你电脑卡，我这边打卡很流畅，难得遇到个人博客打开这么流畅的

[htxy1985]

@bubble21 我觉得并不是，我打开其他人的博客都不卡，当然也包括我的。

[xiaohanyu]

总体上讲，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)

仅供参考哈。

[colinsimth]

@htxy1985 谢谢哈。我想个方案，去优化下。

[xiaohanyu]

“过渡的动画样式比较丰富的” 这点其实满难搞的，首先就是 CSS 的过渡（ transition ）和动画（ animation ）的 API 就有一大堆，然后也不太好学；再就是用得太多的话，网站也比较容易卡顿；还有就是，良好设计和规划的过渡和动画是 UX 的事情，程序员自己想出来的往往都是有问题的……这个是蛮专业的领域，大规模的团队是有专门的职位搞过渡和动画的。

建议只有框架内提供的基本的一些过渡和动画，不建议自己搞太多。

我了解到的一个比较好的应用过渡和动画的网站： https://www.relume.io/ 。看一下就知道，没有专业的 UX 团队，靠程序员自己是很难搞出这种效果的了。

[forty]

1. 找到你要抄的网站
2. 扒它的前端代码以及前端资源 （ css/js/html, 图片,字体等）
3. 什么框架都不需要，pure css/js/html.

[kulous]

每个程序员的心结吧！其实内容更重要吧！

[minami]

漂不漂亮主要是审美问题，不是技术问题。。。

[dedad558]

水个个人网站广告吧, https://cpcagu.com
vue3+纯 CSS 写的, 界面算丑还是漂亮? 还是中规中矩,

[LeeReamond]

@xiaohanyu 确实，relume 这个网站的动画几乎就是想要的高级感了，感觉调教很用心。我是想如果有开源框架能实现基础的 UI 组件层面的互动动画，再加上程序员自己定制 landing page 上面的一些显示动画，能不能做到类似效果

[devwolf]

op 问是否简单，应该是想了解 react 和 vue 两派 ui 库的丰富程度吧？

[xubeiyan]

vue3 的 ui 库推荐一个 vuetify ，文档中文也比较全（看了一下，又出了不少新的，该工作了

[LeeReamond]

@xubeiyan vuetify 部分样式和 tailwindcss 冲突

[xiaohanyu]

@LeeReamond 还是不容易的，因为 motion 是个动态的东西，你去趴别的人网站，看别人的实现，然后来实现自己的，相当于，给你一堆食材，让你自己做顿美味，如果你没有经验的话，不容易。很多 motion 的设置其实并不是 linear 的值。

专业团队有专门做 motion design 的（算是 UX 下面一个很重要的分支），具体你可以搜下这种岗位的需求。

开源实现方面，可以看下 neon database 的网站： https://github.com/neondatabase/website 。

供参考哈。

[xubeiyan]

@LeeReamond vuetify3 有工具类（实际上和 tailwindcss 只有个别区别），看了下你的要求，其实直接用 tailwindcss 写就行了，这些 UI 框架比 tailwindcss 都要封装得更多一些，换来的是你得用他的组件库

[LeeReamond]

@xubeiyan tailwind 我个人感觉用起来感觉是打补丁方便。比如要一个卡片，组件库里没有的样式，用 tailwind 分分钟可以撸出来一个完成度 80%的。但是如果一切从零开始搞，那所有组件都是 80%完成度，合到一起效果就比较菜了。。。