React+Tailwind CSS+Shadcn UI

推荐常用网址

下面这个地址记录了前端常用的命令，以及学习教程等，推荐给各位

https://www.houdunren.com/doc/article/21/208

创建react项目首先需要准备好nodeJS环境，我这里使用的是vite脚手架

步骤如下：

1、创建项目

复制代码

npm create vite@latest my-project
cd my-project

2、安装 Tailwind CSS

复制代码

npm install tailwindcss @tailwindcss/vite

3、在vite.config.ts中引用

复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import tailwindcss from '@tailwindcss/vite'
import path from "path"

export default defineConfig({
  plugins: [tailwindcss(),react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  server: {
    open: true,
  },
})

4、在index.css中引入

复制代码

@import "tailwindcss";

到这里Tailwind CSS就引入成功了，接下来安装Shadcn UI

5、打开https://ui.shadcn.com/docs/installation网址，选择vite

6、Vite - shadcn/ui根据说明进行操作

以上三步在上面已经完成了，就不需要再执行了

7、在tsconfig.json文件中添加compilerOptions

复制代码

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

8、在tsconfig.app.json中添加，这里上面已经添加过了，可以忽略

复制代码

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    }
    // ...
  }
}

9、安装node类型

复制代码

npm install -D @types/node

10、运行 init 命令来设置项目，系统会询问您要配置的几个问题，选择默认就行

复制代码

npx shadcn@latest init

到这里就算添加完成了，接下来就可以安装需要的组件了

11、以按钮为例，每个组件都需要先安装才能使用，安装成功后，项目目录里会多出一个components/ui，所有安装好的组件都会放在这里面

复制代码

npx shadcn@latest add button

在组件中使用：

复制代码

import { Button } from "@/components/ui/button"

function App() {
  return (
    <div className="flex min-h-svh flex-col items-center justify-center">
      <Button>Click me</Button>
    </div>
  )
}

export default App

12、到这里就结束了，可以运行一下你的项目了