全栈开发02-前端项目初始化前端项目初始化，因为我们的前端项目使用的脚手架是Vite，UI框架用的是Tailwindcs

前端项目初始化

因为我们的前端项目使用的脚手架是Vite，UI框架用的是Tailwindcss和shacdn/ui，我们可以通过访问Installation - shadcn/ui，按照安装指示，完成我们项目的初始化工作。

但要注意的是，完全按照这个官方教程，会出现在初始化shadcn时，报错提示tailwind安装检查失败。这个时候需要去到tailwind vite方式安装指引，查看缺少的配置。或者直接看我这篇初始化指引完成项目的初始化。

使用Vite进行安装

进入shadcn/ui的安装指引页面后，我们选择我们的开发框架Vite，这里可以根据项目的实际情况选择。如果说我们有服务器渲染的需求，可以选择Next.js作为我们的开发框架。

Next.js和shadcn/ui是同一个公司的产品，这个公司叫Velcel。

这里我们选择Vite，进入Vite安装指引页面。

创建项目

使用vite开始创建一个新的React项目：
```
npm create vite@latest
```
大家安装的时候如果出现问题，可以查看一下npm源，修改成淘宝的源，速度会快一些。
```
 npm config set registry=https://registry.npmmirror.com
```
添加和配置Tailwind

完成项目创建后，先进入项目所在目录，再执行之后的操作（重要！）。

安装tailwindcss和相关依赖，之后项目文件中会生成tailwind.config.js和postcss.config.js。
```
npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p
```

编辑tsconfig.json

当前版本的 Vite 将 TypeScript 配置拆分为三个文件，其中两个需要编辑。将 baseUrl 和 paths 属性添加到 tsconfig.json 和 tsconfig.app.json 文件的 compilerOptions 部分。

tsconfig.json

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

tsconfig.app.json

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

更新vite.config.js

首先执行以下命令：

npm i -D @types/node

将以下代码添加到 vite.config.ts 中，以便您的应用程序可以正确解析路径。

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

在运行该命令之前，需要完善一下tailwindcss的配置，不然运行命令时，会检查报错。

修改tailwind.config.js文件，内容如下：
```
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
```
然后修改src/index.css,首行增加如下内容：
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
最后运行shadcn-ui init命令来对项目进行设置。
```
npx 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

完成！

添加第一个组件。
```
npx shadcn@latest add button
```
当运行了以上命令之后，就会在我们的项目中生成如下目录：src/components/ui/，目录中已经出现了button按钮组件，通过以上命令将button组件安装到了我们项目，我们就可以在页面中引入该组件。
```
import { Button } from "@/components/ui/button"

export default function Home() {
 return (
   <div>
     <Button>Click me</Button>
   </div>
 )
}
```
这个shadcn如此受欢迎的原因就在于，他的组件直接安装到了我们的开发目录中！这样子我们就可以非常灵活的对组件源码进行修改，以达到我们想要的效果。这个模式跟其他UI框架是完全不同的，像AntD和elementui等，修改组件几乎是不可能的事情。
运行
```
npm run dev
```
项目运行起来之后，默认会打开5173端口，访问该端口就可以看到我们的项目了。

让ChatGPT帮忙

我们可以通过询问ChatGPT，让它告诉我们如何初始化使用Vite作为开发框架，包含Tailwindcss和shadcn/ui框架的React项目。