开发前端 SPA

依赖

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

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

• 第一步，安装 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
  

路由

• /：首页

• /login：用户登录

• /register：用户注册

• /user：用户面板

  • /user/domain：用户的域名管理
  • /user/profile：用户资料
  • /user/pointer：积分变动

• /admin：后台管理

  • /admin/domain：后台域名管理
  • /admin/user：后台用户管理
  • /admin/change-pwd：管理员修改密码
  • /admin/login：后台登录
  • /admin/pointer：后台积分变动管理

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