vue 写出来的网页怎么才能漂亮点，感觉自已写的网页好丑，目前只会用对应的组件

Vue

网页

组件

对应

47 条回复 • 2021-09-16 11:15:06 +08:00

1

bojackhorseman

2021-05-01 08:43:28 +08:00 via iPhone

上第三方库，然后魔改

2

cmdOptionKana

2021-05-01 08:58:14 +08:00 via Android

想省事用 bootstrap, 想深入研究就要学 CSS 和平面设计了。

3

zxCoder

2021-05-01 09:05:50 +08:00

5

没辙

接受现实就完事了

除非你是专业搞前端，可能还需要会一点设计和审美，否则就接受“好看的页面这玩意是专业的，不是谁都能糊出来”的现实

4

Quarter

2021-05-01 09:20:55 +08:00 via iPhone

要搭配 UI 设计，网页好不好看和用啥框架其实没啥太大关系的

5

cdlnls

2021-05-01 09:25:04 +08:00

无脑上简洁风格，用一些成熟的第三方库，遵循现有的设计规范。这样一套下来应该差不到哪里去，也不至于说丑。

6

tabris17

2021-05-01 09:34:32 +08:00 via iPhone

留白就可以了。就算用浏览器内置组件都不会丑到哪里去

7

Tdy95

2021-05-01 10:49:43 +08:00 via Android

试试 tailwind css

8

hoyixi

2021-05-01 10:53:00 +08:00

6

如果多数程序员都能做出各种漂亮 UI，那 UI 美工都失业了

9

gauzung

2021-05-01 10:53:48 +08:00

抄

10

waltcow

2021-05-01 10:55:49 +08:00 via iPhone

Tailwindcss

11

swift

2021-05-01 11:46:38 +08:00 via iPhone

5

我找了个设计女朋友

12

Outshine

2021-05-01 12:23:44 +08:00

3

恕我直言，这个和 vue 没有任何关系。。。

13

falcon05

2021-05-01 12:38:46 +08:00 via iPhone

1

这个跟前端甚至也没什么关系，学点设计 UI，ux 的课程

14

mozhizhu

2021-05-01 12:47:47 +08:00

我以为吧，是想说代码层次写的很丑……

15

baoshuo

2021-05-01 12:54:12 +08:00

这个和 vue 没啥关系，你可以试试各种前端框架（ bootstrap tailwindcss 等等

16

wolfan

2021-05-01 13:19:33 +08:00 via Android

我都是自己写 CSS，弄了个标准库作能用，然后每个工程应实变化。
当然，如果你不想写 css 建议用 tailwind 是真的香。

17

baobao1270

2021-05-01 13:28:29 +08:00

直接抄大厂的设计规范呗
Material Design，Fluent Design，ElementUI，都可以

18

gouflv

2021-05-01 13:44:52 +08:00 via iPhone

1

网页丑是因为用 vue ？懂了

19

labulaka521

OP

2021-05-01 16:26:56 +08:00

哈哈谢谢大佬们

20

no1xsyzy

2021-05-01 17:09:11 +08:00

*{padding:5px} 解万愁

21

ch2

2021-05-01 17:45:29 +08:00

有种东西叫组件库

22

suzic

2021-05-01 18:01:15 +08:00 via Android

组件库救不了的，同样的 md 风格，在人家网站上就特别漂亮，自己拼起来就不好看。想做的漂亮点，要么找个设计师，要么抄

23

yucongo

2021-05-01 18:03:16 +08:00

试试 vuetify 或 buefy

24

cctrv

2021-05-01 18:21:57 +08:00 via iPhone

1

用 tailwindcss 就自然寫得很漂亮了。
可以看看我幾年前寫的一個網站。
https://www.5mlstudio.com/

然後再找一個好看的字體。

25

IGJacklove

2021-05-01 18:41:07 +08:00 via Android

可以炒一下别人的网页，跟语言框架没关系。

26

Cbdy

2021-05-01 18:44:49 +08:00 via Android

提高一下审美，学一点平面设计

27

code4you

2021-05-01 18:49:13 +08:00

找个设计师女票呀

28

anguiao

2021-05-01 18:53:05 +08:00 via Android

1

用 TailwindCSS 等有工具类的框架，确实能好一些。框架里的预设值，对做出一个能看的页面还是很有帮助的。

29

Zchary

2021-05-01 20:21:31 +08:00 via iPhone

参照 material-ui 设计规范和设计风格

30

DiamondYuan

2021-05-01 21:06:57 +08:00

1

设计又一些基本的原则。

- 亲密
- 对齐
- 对比
- 重复

可以化一点点时间扫一遍 ant design 的设计原则

https://ant.design/docs/spec/introduce-cn

31

DiamondYuan

2021-05-01 21:07:48 +08:00

顺便再推荐一本小书《写给大家看的设计书》

32

Baboonowen

2021-05-01 22:23:44 +08:00 via Android

嗨，我直接抄了 notion css

33

Baboonowen

2021-05-01 22:23:57 +08:00 via Android

1

https://tab.quoth.win

34

LeeReamond

2021-05-02 02:49:13 +08:00

只能推荐一下 https://codepen.io/ 了，隔行如隔山，程序员搞不了设计师的工作，虽然对不起设计师，如果老板叫我搞个什么东西我肯定是厚颜无耻直接抄的。

35

zyh94946

2021-05-02 06:34:02 +08:00

@labulaka521 看大佬这名字好眼熟啊，想起来给 crocodile 提过 pr 还在 open 😂

36

huguotai

2021-05-02 06:47:43 +08:00 via iPhone

tailwindcss 吧

37

chanchan

2021-05-02 08:13:48 +08:00

提高自己审美 /找一套你觉得好看的组件

38

hyrious

2021-05-02 09:44:57 +08:00

《写给大家看的设计书》
《 CSS Secrets 》
《如何找个设计师女朋友》
《……》
老板问你要高大上就抄苹果

39

chanchan

2021-05-02 10:23:01 +08:00

https://chinese.freecodecamp.org/learn/responsive-web-design/#applied-visual-design
这里可以学到一点

40

q197

2021-05-02 12:52:21 +08:00

要么就纯用人家做好的框架。如果想自己设计、排版，又没有美工基础，得参照别人的规范来。按照我的经验，例如开发安卓 app，自己排版控件做出来的 app 一看就是业余的，但是参照 md 标准按照人家的规范来设置字号、控件间距，app 一下子就看起来高大上了

41

Terry05

2021-05-03 11:37:05 +08:00

这是审美和设计的问题，跟前端关系不大

42

AkideLiu

2021-05-03 11:58:34 +08:00 via iPhone

你觉得自己想的丑，那不如找个自己看着顺眼的，融会贯通一下

43

jones2000

2021-05-03 19:03:32 +08:00

你缺美工和产品设计

44

wolong

2021-05-04 11:00:57 +08:00

你觉得哪个做的好看，就抄他的。

45

dyv9

2021-05-09 17:02:32 +08:00 via Android

至少要用 bootstrap-vue 吧

46

ccyu220

2021-08-11 15:23:42 +08:00

@cctrv 看了你的简历 PDF，很赞

47

mahoo12138

2021-09-16 11:15:06 +08:00 via Android

像我去设计网站找别人的设计，能启发些灵感