文档
Vite
Vite
安装并配置 Vite。
创建项目
首先使用 vite
创建一个新的 React 项目
pnpm create vite@latest
添加 Tailwind 及其配置
安装 tailwindcss
及其对等依赖项,然后生成 tailwind.config.js 和 postcss.config.js 文件
pnpm add -D tailwindcss postcss autoprefixer
pnpm dlx tailwindcss init -p
在您的主 css 文件中添加此导入标头,在我们的例子中是 src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ... */
在 tailwind.config.js
中配置 tailwind 模板路径
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
theme: {
extend: {},
},
plugins: [],
}
编辑 tsconfig.json 文件
当前版本的 Vite 将 TypeScript 配置拆分为三个文件,其中两个需要编辑。将 baseUrl
和 paths
属性添加到 tsconfig.json
和 tsconfig.app.json
文件的 compilerOptions
部分
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
编辑 tsconfig.app.json 文件
将以下代码添加到 tsconfig.app.json
文件中以解析路径,供您的 IDE 使用
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
更新 vite.config.ts
将以下代码添加到 vite.config.ts
中,以便您的应用程序可以无错误地解析路径
pnpm add -D @types/node
import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
运行 CLI
运行 shadcn-ui
init 命令来设置您的项目
pnpm dlx shadcn@latest init
配置 components.json
系统将询问您几个问题以配置 components.json
Which style would you like to use? › New York
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes
就是这样
您现在可以开始向您的项目添加组件了。
pnpm dlx shadcn@latest add button
上面的命令会将 Button
组件添加到您的项目中。然后您可以像这样导入它
import { Button } from "@/components/ui/button"
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
)
}