开发前端 SPA

为了更直观的进行 API 开发，我们先来编写前端 SPA。

我们的前端使用 React 开发，它需要一下依赖：

• react-router-dom：路由
• tailwind css：CSS
• shadcn-ui：Tailwind CSS 组件库
• react-use：一些使用的 React Hook
• react-turnstile：Clodflare Turnstile 人机验证的 React 组件
• zod：表单验证
• @hookform/resolvers：将 zod 集成到 React 的 Hook

其他依赖的安装都很简单，一条命令就行：

• 第一步，安装 Tailwind CSS：

  yarn add -D tailwindcss postcss autoprefixer
  npx tailwindcss init -p
  

• 第二步，将 src/index.css 改为以下内容：

  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• 第三步，将 tailwind.config.js 改为：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

• 第四步，添加以下内容到 tsconfig.json：

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

• 第五步，添加以下内容到 tsconfig.app.json：

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

• 第六步，安装 yarn add -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"),
      },
    },
  })
  
  

• 第七步，安装 shadcn 命令行工具，并初始化：

  npx shadcn@latest init
  

路由

本章代码位于05.前端分支。