Shadcn UI
从零开始使用 Shadcn UI。
1. 前期准备
1.1. 安装 Node.js 和 npm
Node.js 是一个 JavaScript 运行环境，而 npm 是 Node.js 的包管理工具。
你需要先安装它们：
- 下载 Node.js：访问 Node.js 官方网站，下载并安装最新的 LTS 版本。安装 Node.js 时会自动安装 npm。
1.2. 安装 Visual Studio Code
Visual Studio Code（VS Code）是一个流行的代码编辑器。
你可以从其官方网站下载并安装。
2. 创建 React 项目
2.1. 创建项目文件夹
在你的电脑上创建一个新的文件夹，例如 my-shadcn-app。
2.2. 打开终端
在 Windows 上，你可以使用命令提示符（CMD）或 PowerShell。
在 Mac 和 Linux 上，你可以使用终端。
2.3. 初始化项目
在终端中，导航到你创建的文件夹，然后运行以下命令来初始化一个新的 React 项目（TypeScript 模板）：
npm create vite@latest . -- --template react-ts
初始化完成后，当前文件夹中就会生成一个基础的 React 项目。
2.4. 进入项目文件夹
cd my-shadcn-app
然后安装项目依赖：
npm install
3. 安装 Shadcn UI 和 Tailwind CSS
Shadcn UI 不是传统的 npm 组件库，组件代码需要通过 CLI 直接生成到项目中，因此要先完成 Tailwind CSS 与路径别名的配置，再初始化 Shadcn UI。
3.1. 安装 Tailwind CSS
Tailwind CSS 提供官方的 Vite 插件，在终端中运行以下命令安装：
npm install tailwindcss @tailwindcss/vite
3.2. 配置 Vite
安装 Node.js 的类型定义，然后编辑项目根目录下的 vite.config.ts 文件：
npm install -D @types/node
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
3.3. 配置路径别名
在 tsconfig.json 和 tsconfig.app.json 的 compilerOptions 中添加以下配置，以便从 @ 路径导入组件：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
3.4. 引入 Tailwind CSS 样式
将 src 文件夹中的 index.css 文件内容替换为以下内容：
@import "tailwindcss";
3.5. 初始化 Shadcn UI
在终端中运行以下命令，按照提示完成初始化（选择默认配置即可）：
npx shadcn@latest init
然后添加本教程用到的 Button 组件：
npx shadcn@latest add button
组件代码会被生成到 src/components/ui 文件夹中。
4. 使用 Shadcn UI 组件
4.1. 创建一个简单的组件
在 src 文件夹中找到 App.tsx 文件，并将其内容替换为以下代码：
import { Button } from "@/components/ui/button"
function App() {
return (
<div className="App">
<header className="App-header">
<Button>点击我</Button>
</header>
</div>
);
}
export default App;
4.2. 运行项目
在终端中运行以下命令启动开发服务器：
npm run dev
打开浏览器，访问 http://localhost:5173，你应该能看到一个带有"点击我"按钮的页面。
5. 详细操作步骤
5.1. 安装 VS Code 插件
为了提高开发效率，你可以在 VS Code 中安装以下插件：
- ESLint：帮助你保持代码风格一致。
- Prettier：自动格式化代码。
- Tailwind CSS IntelliSense：提供 Tailwind CSS 的智能提示。
5.2. 创建更多组件
你可以在 src/components 文件夹中创建新的组件文件，例如，创建一个 MyButton.tsx 文件：
import { Button } from "@/components/ui/button"
const MyButton = () => {
return <Button>自定义按钮</Button>
}
export default MyButton
然后在 App.tsx 中引入并使用这个新组件：
import MyButton from "./components/MyButton"
function App() {
return (
<div className="App">
<header className="App-header">
<MyButton />
</header>
</div>
);
}
export default App;
5.3. 学习基础 HTML 和 CSS
为了更好地理解和使用 Shadcn UI，你可以学习一些基础的 HTML 和 CSS 知识。
这将帮助你更好地定制和调整组件的样式。
通过以上步骤，你应该能够从零开始使用 Shadcn UI 并创建简单的 React 应用。
如果你遇到问题，可以参考 shadcn/ui 官方文档或社区资源获取帮助。