本预设自带的分技术栈 starter 模板目录与用法。生成项…

# React + TypeScript + Vite 电商后台骨架搭建指南

一、初始化项目

```bash

npm create vite@latest admin-app -- --template react-ts

cd admin-app && npm install

npm install react-router-dom

```

二、配置端口（vite.config.ts）

```ts

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

export default defineConfig({

plugins: [react()],

server: { port: 3100, host: true }

})

```

三、目录结构

```

src/

├── pages/

│ ├── Login.tsx

│ └── ProductList.tsx

├── components/

│ └── AuthGuard.tsx

├── router/index.tsx

└── main.tsx

```

四、路由与守卫

路由配置（router/index.tsx）：

```tsx

import { createBrowserRouter, Navigate } from 'react-router-dom'

import Login from '../pages/Login'

import ProductList from '../pages/ProductList'

import AuthGuard from '../components/AuthGuard'

export const router = createBrowserRouter([

{ path: '/login', element: <Login /> },

{

path: '/products',

element: <AuthGuard><ProductList /></AuthGuard>

},

{ path: '*', element: <Navigate to="/login" replace /> }

])

```

路由守卫（AuthGuard.tsx）：

```tsx

import { Navigate } from 'react-router-dom'

import type { ReactNode } from 'react'

export default function AuthGuard({ children }: { children: ReactNode }) {

const token = localStorage.getItem('token')

return token ? <>{children}</> : <Navigate to="/login" replace />

}

```

五、登录页要点（Login.tsx）

• 受控表单：useState 管理 username/password
• 提交时调用登录接口（用 fetch/axios），成功后将返回的 token 存入 localStorage
• 存在 token 时访问 /login 可重定向到商品列表

六、商品列表页要点（ProductList.tsx）

• 使用 useEffect + useState 请求商品数据
• 表格渲染：商品名、价格、库存、操作列（编辑/删除占位）
• 请求失败时给出错误提