创建项目
首先,使用 vite
创建一个新的 React 项目
添加 Tailwind 及其配置
安装 tailwindcss
及其对等依赖,然后生成您的 tailwind.config.js
和 postcss.config.js
文件
编辑 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 中,以便您的应用程序可以无错误地解析路径
# (so you can import "path" without error)
npm i -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 命令以设置您的项目
配置 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
就是这样
您现在可以开始向项目中添加组件了。
上面的命令会将 Button
组件添加到您的项目中。然后您可以像这样导入它
import { Button } from "@/components/ui/button";
export default function Home() {
return (
<div>
<Button>Click me</Button>
</div>
);
}