2026西湖龙井茶官网DTC发售：茶农直供，政府溯源防伪到农户家
一份完整的分步指南，助您快速搭建 **React + Vite + Tailwind CSS + Shadcn UI**，并配置简洁的 @/... 别名导入——无需 TypeScript！*
⏱️ 预计耗时：约 10 分钟
🎯 成果：具备美观且符合无障碍标准的组件，可直接投入生产的 React 应用
🧩 第一步：创建 Vite + React 项目
使用 Vite 搭建新项目：
npm create vite@latest my-app
cd my-app
出现提示时，选择：
选项 | 选择
框架 | React
变体 | JavaScript
✅ Vite 将生成一个轻量、快速的 React starter 模板，并开箱即用支持 HMR（热模块替换）。
🌀 第二步：安装依赖项
安装核心包和 Tailwind 的官方 Vite 插件：
npm install
npm install tailwindcss @tailwindcss/vite
| 包名 | 用途 |
|---|---|
tailwindcss |
实用优先的 CSS 框架 |
@tailwindcss/vite |
Tailwind 的官方 Vite 插件（无需配置 PostCSS！） |
🎨 第三步：配置 vite.config.js
将 vite.config.js 的全部内容替换为：
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import path from "path";
// https://vite.dev/config/
export default defineConfig({
plugins: [
tailwindcss(),
react({
babel: {
plugins: [["babel-plugin-react-compiler"]], // ✅ 可选：用于提升性能的 React 编译器
},
}),
],
resolve: {
alias: {
"@": path.免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
