5、用 shadcn/ui 构建界面

上一课，我们亲手装修了我们的“个人名片”，它现在已经有模有样了。但你可能会想：难道每一个按钮、每一个输入框，我都需要自己从零开始设计和装修吗？

当然不！现代 Web 开发，懂得最大化地利用成熟的、高质量的“成品模块”。今天，我们就来认识能让我们的开发效率提升十倍的“神器”——shadcn/ui。

1、shadcn/ui 是什么？(它不是什么？)

首先，你必须理解一个最重要的点：shadcn/ui 不是一个传统的组件库（比如 Ant Design 或 Material-UI）。你不会像安装一个软件一样，npm install 一个大而全的库。

它更像一个“顶级设计师的成品模块展厅”。

它的工作方式是：你看中了展厅里的一个按钮，然后你运行一条命令，它会把这个按钮组件的源代码，直接复制到你自己的项目里（比如 src/components/ui 目录下）。

这种模式的好处是颠覆性的：

1. 你拥有完全的控制权：代码被复制进来后，就完全属于你了。你可以随心所欲地修改它的任何部分。
2. 项目保持轻量：你的项目里不会包含任何你用不到的冗余代码。
3. 无缝继承你的风格：所有组件都基于我们正在使用的 Tailwind CSS，定制起来极其容易。

2、实战

第 1 步：初始化项目

在一个项目里，这个初始化命令只需要运行一次。

1. 打开终端，确保你处在项目根目录 (personal-card)。
2. 运行以下命令：

jsx
npx shadcn@latest init

1. 它会问你一些关于项目配置的问题，你基本上可以一路按回车键，全部使用默认选项即可。

这里是让你选择默认的颜色，我这里就选默认的

第 2 步：学会逛“展厅”并挑选组件

这才是最关键的一步。现在，我来教你如何自己去“寻宝”。

1、打开官方网站：在浏览器中打开 shadcn/ui 的官方文档网站 https://ui.shadcn.com/docs/installation/next。

2、浏览组件列表：在网站的左侧边栏，你会看到一个长长的列表，包含了 Alert, Button, Card, Dialog 等所有可用的组件。这里就是我们的“展厅目录”。

3、研究组件页面：我们随便点一个，比如 Card。你会看到这个组件的专属页面，通常包含三个核心区域：