开发前端 SPA

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

由于本站侧重于 AXUM 的后端开发，前端部分简单介绍一下。有兴趣的朋友，可以在源码仓库查看完整源码。遇到问题可以在TG群讨论。

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

yarn add react-router-dom react-use react-turnstile zod @hookform/resolvers

• 第一步，安装 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.前端分支。