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