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

[LeeReamond]

定义：

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

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

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

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

[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%完成度，合到一起效果就比较菜了。。。