Vue 3.0 时尚东到家（二）：CSS 样式和图标：Flex + Iconfont

2023-10-31 17:36:29

前言

在上一篇文章中，我们学习了如何在 Vue 3 中使用 TypeScript 来构建一个简单的待办事项应用程序。在本篇文章中，我们将继续学习如何使用 Vue 3 来构建一个更复杂的应用程序：时尚东到家。

时尚东到家是一个在线购物平台，用户可以在线购买各种商品。为了让时尚东到家看起来更时尚、更美观，我们将使用 Flexbox 和 Iconfont 来设计其用户界面。

Flexbox

Flexbox 是一种 CSS 布局模型，它允许您轻松创建灵活的布局。Flexbox 的特点是它可以根据容器的大小自动调整子元素的大小和位置。这使得 Flexbox 非常适合创建响应式布局，即可以在不同设备上良好显示的布局。

要使用 Flexbox，您需要先在父元素上设置 display: flex;。然后，您可以使用 flex-direction、justify-content、align-items 和 align-self 属性来控制子元素的布局。

flex-direction 属性决定了子元素在父元素中的排列方向。它可以取以下值：

justify-content 属性决定了子元素在父元素中的水平排列方式。它可以取以下值：

align-items 属性决定了子元素在父元素中的垂直排列方式。它可以取以下值：

align-self 属性决定了单个子元素在父元素中的垂直排列方式。它可以覆盖 align-items 属性的设置。

Iconfont 是一个在线图标库，提供各种精美的图标。您可以免费使用这些图标，也可以付费购买高级图标。

要使用 Iconfont，您需要先注册一个账号。然后，您可以搜索图标，找到心仪的图标后加入购物车。最后，您可以将购物车中的图标导出到本地。

导出图标后，您需要将图标文件添加到您的项目中。然后，您就可以在您的项目中使用这些图标了。

在使用 Flexbox 和 Iconfont 时，有一些技巧和建议可以帮助您创建出更美观、更易于使用的用户界面。

使用 Flexbox 时，尽量使用 flex-direction: row 和 justify-content: space-between。这可以使您的布局更简洁、更易于阅读。
使用 Iconfont 时，尽量选择简单、清晰的图标。这可以使您的用户界面更美观、更易于理解。
在使用 Flexbox 和 Iconfont 时，要考虑响应式设计。您的布局应该能够在不同设备上良好显示。