最近在借助AI学习一些跨栈的知识，发现学习逻辑都变了，不再需要一点点啃了，可以让AI快速指导，当然学习的方法论还是没有变化，先了解框架模块，再了解工作流程，最后再深挖具体概念。最大的变化就是深挖这一块可以不必做的很细了，本身学习新的知识栈就是为了更好的让AI明确我的意图以及做代码checker，代码编写是由AI完成的，如果到时哪块不是很了解，再让AI介绍即可。当然对于AI的提示词也可以由AI完成。

AI生成速通Prompt

这个可以让https://ai-bot.cn/promptpilot/ 给你优化prompt，总之就是让AI在基于Java背景基础下快速掌握React18的基本语法和操作：

下面给出一份「为 Java 程序员量身定制的 45 分钟 React 18 速通」DeepSeek 专用 prompt。
下面给出一份「为 Java 程序员量身定制的 45 分钟 React 18 速通」DeepSeek 专用 prompt。
直接把整段话丢给 DeepSeek，它会按「Java 思维 → 前端映射」的方式输出：语法对照表、带类型约束的代码骨架、以及一键可跑的 Vite 项目。

---

中文指令
你是一名同时写 Java（Spring Boot）和 React 的 10 年全栈架构师。
学员情况：

• 0 基础 Vue/React，但写过 HTML/CSS；
• 精通 Java（类、接口、泛型、Spring 注解、Maven 多模块）。

目标：45 分钟内让我把「Java 后端思维」平移到 React 18 + TypeScript，能独立跑通「用户列表」小项目（AJAX 调用 /api/users，增删改查，Bootstrap 样式）。

请按下面 4 步输出，全部给出可复制粘贴的代码与命令，且每段都加上「Java 等价映射」注释，让我一眼看懂前端概念对应的后端知识。

1. 环境 5 min
   a. 单条命令安装 Node 20 LTS + pnpm（类比 Maven Wrapper）。
   b. 用 pnpm create vite 创建 react-ts 项目，解释「package.json ≈ pom.xml」「vite.config.ts ≈ application.yml」。
   c. VSCode 必备插件清单 + 调试 F5 配置（launch.json）。

2. 语法 10 min
   给出「Java 类 ↔ React 函数组件」「接口 ↔ TypeScript 类型别名」「Spring @RestController ↔ fetch」「Bean 注入 ↔ props 传参」4 组对照表；用 20 行代码展示「UserDTO → UserComponent」的完整映射。

3. 状态与生命周期 15 min
   a. 用 useState<User[]> 实现「查询/新增/删除」三连，对比 Java 集合 List 操作。
   b. 用 useEffect 模拟 Spring 的 @PostConstruct，组件挂载时拉取 /api/users；返回清理函数，对比「@PreDestroy」。
   c. 自定义 hook useUsers() 封装 CRUD，类比「Service 层 + @Transactional」。

4. 路由与部署 15 min
   a. 安装 react-router-dom，配置 2 个路由：/users 列表、/user/:id 详情，对比 Spring @RequestMapping。
   b. 用 MSW（Mock Service Worker）mock 后端 /api/users，脱离后台也能开发，类比「@Profile(“local”)」。
   c. pnpm build 生成静态文件，丢到 Spring Boot 的 /static 目录，实现「前后端一体 jar 启动」；再附 Netlify 一键部署方案。

额外福利：

• 每步末尾附 1 道「Java → React 易错点」+ 答案（如「setState 异步 vs Java setter 同步」「闭包旧值陷阱 vs 线程封闭」）。
• ASCII 思维导图：把「组件-状态-路由-HTTP」画成 1 张图，方便截图保存。

输出格式：
「命令行 → 代码块（带 Java 映射注释）→ 易错点 → 导图」四段式，杜绝废话，全部可运行。
直接把整段话丢给 DeepSeek，它会按「Java 思维 → 前端映射」的方式输出：语法对照表、带类型约束的代码骨架、以及一键可跑的 Vite 项目。

---

React 前端架构：页面效果对照与分层详解

🎨 页面效果展示与分层对应

┌─────────────────────────────────────────────────────────┐
│                   用户管理系统                            │
├─────────────────────────────────────────────────────────┤
│  [搜索用户...]        [＋添加用户]                        │
├─────────────────────────────────────────────────────────┤
│  ┌───┬─────────────┬─────────────────┬──────────────┐   │
│  │ID │ 姓名        │ 邮箱            │ 操作         │   │
│  ├───┼─────────────┼─────────────────┼──────────────┤   │
│  │ 1 │ 张三        │ zh@example.com  │ [编辑][删除] │   │
│  │ 2 │ 李四        │ li@example.com  │ [编辑][删除] │   │
│  │ 3 │ 王五        │ wang@example.com│ [编辑][删除] │   │
│  └───┴─────────────┴─────────────────┴──────────────┘   │
├─────────────────────────────────────────────────────────┤
│  第 1 页，共 5 页 | 显示 1-3 条，共 15 条               │
│  [首页] [上页] [1] [2] [3] [4] [5] [下页] [末页]       │
└─────────────────────────────────────────────────────────┘

🏗️ 完整的分层架构

┌─────────────────────────────────────────────────────────┐
│                   配置层 (Configuration)                 │
├─────────────────────────────────────────────────────────┤
│ 作用：管理应用配置、环境变量、全局常量、类型定义         │
│ 包含：环境变量、API配置、类型定义、构建配置             │
└─────────────────────────────────────────────────────────┘
                             ↓
┌─────────────────────────────────────────────────────────┐
│                   路由层 (Routing)                       │
├─────────────────────────────────────────────────────────┤
│ 作用：管理页面路由、导航、权限控制、懒加载              │
│ 包含：路由配置、布局组件、路由守卫、嵌套路由            │
└─────────────────────────────────────────────────────────┘
                             ↓
┌─────────────────────────────────────────────────────────┐
│                   组件层 (Components)                    │
├─────────────────────────────────────────────────────────┤
│ 作用：渲染用户界面、处理用户交互、展示数据              │
│ 包含：页面组件、业务组件、UI组件、布局组件              │
└─────────────────────────────────────────────────────────┘
                             ↓
┌─────────────────────────────────────────────────────────┐
│                   Hooks 层 (Custom Hooks)               │
├─────────────────────────────────────────────────────────┤
│ 作用：封装业务逻辑、状态管理、数据获取、副作用处理       │
│ 包含：状态管理Hook、业务逻辑Hook、数据获取Hook          │
└─────────────────────────────────────────────────────────┘
                             ↓
┌─────────────────────────────────────────────────────────┐
│                   服务层 (Services)                      │
├─────────────────────────────────────────────────────────┤
│ 作用：封装业务API调用、数据转换、缓存逻辑               │
│ 包含：API服务类、数据转换器、工具函数                   │
└─────────────────────────────────────────────────────────┘
                             ↓
┌─────────────────────────────────────────────────────────┐
│                  HTTP 客户端层 (HTTP Client)             │
├─────────────────────────────────────────────────────────┤
│ 作用：处理HTTP通信、请求拦截、响应处理、错误统一         │
│ 包含：HTTP客户端、拦截器、错误处理、认证管理            │
└─────────────────────────────────────────────────────────┘
                             ↓
┌─────────────────────────────────────────────────────────┐
│                   后端系统 (Backend)                     │
├─────────────────────────────────────────────────────────┤
│ 作用：提供数据API、业务逻辑处理、数据持久化             │
│ 包含：Spring Boot应用、数据库、业务逻辑                 │
└─────────────────────────────────────────────────────────┘

1. 配置层 (Configuration Layer)

作用：管理应用配置、环境变量、类型定义和构建配置

// 🔥 User 模型定义位置 - src/types/user.ts
export interface User {
  id: number;           // 用户ID
  name: string;         // 用户名
  email: string;        // 邮箱
  avatar?: string;      // 头像URL（可选）
  createdAt: string;    // 创建时间
  updatedAt: string;    // 更新时间
}

export interface CreateUserRequest {
  name: string;
  email: string;
  avatar?: string;
}

export interface UpdateUserRequest {
  name?: string;
  email?: string;
  avatar?: string;
}

export interface UserQueryParams {
  page?: number;
  pageSize?: number;
  keyword?: string;
}

export interface PaginatedResponse<T> {
  data: T[];
  total: number;
  page: number;
  pageSize: number;
  totalPages: number;
}

// 环境变量配置 - .env.development
VITE_API_BASE_URL=http://localhost:8080/api
VITE_APP_TITLE=用户管理系统 - 开发环境

// 环境变量配置 - .env.production  
VITE_API_BASE_URL=https://api.production.com/api
VITE_APP_TITLE=用户管理系统

// Vite 构建配置 - vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components'),
    },
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});

// 应用配置 - src/config/app.ts
export const AppConfig = {
  appName: import.meta.env.VITE_APP_TITLE || '用户管理系统',
  apiBaseUrl: import.meta.env.VITE_API_BASE_URL,
  isDevelopment: import.meta.env.DEV,
  version: '1.0.0',
};

export const ApiConfig = {
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 10000,
  endpoints: {
    users: '/users',
  },
};

Java 映射：

• .env 文件 ≈ Spring Boot 的 application.yml
• 类型定义 ≈ Java 的 DTO 类和接口
• Vite 配置 ≈ Maven/Gradle 构建配置

2. 路由层 (Routing Layer)

作用：管理页面路由、导航、布局和懒加载

// 路由配置 - src/router/index.tsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';
import AppLayout from '../layouts/AppLayout';
import LoadingSpinner from '../components/LoadingSpinner';

// 懒加载页面组件
const UserManagement = lazy(() => import('../pages/UserManagement'));
const UserDetail = lazy(() => import('../pages/UserDetail'));

const router = createBrowserRouter([
  {
    path: '/',
    element: <AppLayout />,
    children: [
      {
        index: true,
        element: <Navigate to="/users" replace />,
      },
      {
        path: 'users',
        children: [
          {
            index: true,
            element: (
              <Suspense fallback={<LoadingSpinner />}>
                <UserManagement />
              </Suspense>
            ),
          },
          {
            path: ':userId',
            element: (
              <Suspense fallback={<LoadingSpinner />}>
                <UserDetail />
              </Suspense>
            ),
          },
        ],
      },
    ],
  },
]);

export const AppRouter: React.FC = () => {
  return <RouterProvider router={router} />;
};

// 布局组件 - src/layouts/AppLayout.tsx
import { Outlet } from 'react-router-dom';
import Header from '../components/Header';
import Sidebar from '../components/Sidebar';

const AppLayout: React.FC = () => {
  return (
    <div className="app-layout">
      <Header />
      <div className="layout-content">
        <Sidebar />
        <main className="main-content">
          <Outlet /> {/* 子路由渲染位置 */}
        </main>
      </div>
    </div>
  );
};

Java 映射：

• React Router ≈ Spring MVC 的 @Controller + @RequestMapping
• 布局组件 ≈ Spring 的模板布局
• 懒加载 ≈ Spring 的 @Lazy 注解

3. 组件层 (Components Layer) - 直接对应页面元素

// 🔥 对应：页面标题、搜索框、添加按钮
const PageHeader: React.FC = () => {
  return (
    <div className="page-header">
      <h1>用户管理系统</h1>
      <div className="header-actions">
        <SearchInput />
        <button className="btn-primary">＋添加用户</button>
      </div>
    </div>
  );
};

// 🔥 对应：用户表格
const UserTable: React.FC<{ users: User[] }> = ({ users }) => {
  return (
    <table className="user-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>姓名</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {users.map(user => (
          <UserTableRow key={user.id} user={user} />
        ))}
      </tbody>
    </table>
  );
};

// 🔥 对应：表格中的每一行
const UserTableRow: React.FC<{ user: User }> = ({ user }) => {
  return (
    <tr>
      <td>{user.id}</td>
      <td>{user.name}</td>
      <td>{user.email}</td>
      <td>
        <button className="btn-edit">编辑</button>
        <button className="btn-delete">删除</button>
      </td>
    </tr>
  );
};

// 🔥 对应：底部页码信息
const Pagination: React.FC = () => {
  return (
    <div className="pagination">
      <span>第 1 页，共 5 页</span>
      <div className="pagination-controls">
        <button>首页</button>
        <button>上页</button>
        <button className="active">1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
        <button>下页</button>
        <button>末页</button>
      </div>
    </div>
  );
};

Java 映射：

• React 组件 ≈ Java 类（有状态、有方法、可复用）
• JSX 返回的 HTML ≈ Java 类的 toString() 或模板引擎输出
• Props 参数 ≈ 构造器参数或 setter 方法

4. Hooks 层 (Hooks Layer) - 管理页面状态和逻辑

// 🔥 对应：整个页面的数据管理逻辑
const useUserManagement = () => {
  // 状态声明：对应页面上的各种数据
  const [users, setUsers] = useState<User[]>([]);        // 用户列表数据
  const [loading, setLoading] = useState(false);         // 加载状态
  const [searchKeyword, setSearchKeyword] = useState(''); // 搜索关键词
  const [pagination, setPagination] = useState({         // 分页信息
    current: 1,
    pageSize: 10,
    total: 0
  });

  // 🔍 核心概念：useEffect - 副作用处理
  // 类似 Java 的 @PostConstruct，组件挂载时执行
  useEffect(() => {
    loadUsers(); // 页面加载时自动获取数据
  }, []);

  // 🔍 核心概念：async/await - 异步数据获取
  const loadUsers = async () => {
    setLoading(true);
    try {
      // await：等待后端API返回数据
      const response = await userService.getUsers({
        page: pagination.current,
        pageSize: pagination.pageSize,
        keyword: searchKeyword
      });
      
      // 数据返回后更新状态，触发页面重新渲染
      setUsers(response.data);
      setPagination(prev => ({
        ...prev,
        total: response.total
      }));
    } catch (error) {
      console.error('加载用户失败:', error);
    } finally {
      setLoading(false);
    }
  };

  // 搜索功能
  const handleSearch = async (keyword: string) => {
    setSearchKeyword(keyword);
    setPagination(prev => ({ ...prev, current: 1 }));
    // 搜索关键词改变后重新加载数据
    await loadUsers();
  };

  // 分页切换
  const handlePageChange = async (page: number) => {
    setPagination(prev => ({ ...prev, current: page }));
    await loadUsers();
  };

  // 删除用户
  const handleDeleteUser = async (userId: number) => {
    try {
      await userService.deleteUser(userId);
      // 删除成功后重新加载数据
      await loadUsers();
    } catch (error) {
      console.error('删除用户失败:', error);
    }
  };

  return {
    // 状态数据（供组件显示用）
    users,
    loading,
    pagination,
    
    // 操作方法（供组件交互用）
    handleSearch,
    handlePageChange,
    handleDeleteUser,
    loadUsers
  };
};

Java 映射：

• useState ≈ 类的成员变量 + getter/setter
• useEffect ≈ @PostConstruct + @PreDestroy
• 自定义 Hook ≈ Service 业务逻辑类

5. 服务层 (Services Layer) - 数据获取和业务逻辑

// 🔥 对应：与后端API的通信逻辑
class UserService {
  // 🔍 核心概念：Promise - 异步操作的结果容器
  async getUsers(params: UserQueryParams): Promise<UserListResponse> {
    // 实际发送HTTP请求到后端
    const response = await httpClient.get('/api/users', { params });
    return response.data;
  }

  async deleteUser(userId: number): Promise<void> {
    // DELETE 请求到后端
    await httpClient.delete(`/api/users/${userId}`);
  }

  async createUser(userData: CreateUserRequest): Promise<User> {
    // POST 请求创建用户
    const response = await httpClient.post('/api/users', userData);
    return response.data;
  }

  async updateUser(userId: number, userData: UpdateUserRequest): Promise<User> {
    // PUT 请求更新用户
    const response = await httpClient.put(`/api/users/${userId}`, userData);
    return response.data;
  }
}

// 🔍 核心概念：async 函数总是返回 Promise
// 使用示例：
const userService = new UserService();

// 方法1：使用 then/catch（传统Promise方式）
userService.getUsers({ page: 1, pageSize: 10 })
  .then(users => {
    console.log('获取到的用户:', users);
  })
  .catch(error => {
    console.error('获取用户失败:', error);
  });

// 方法2：使用 async/await（推荐，更清晰）
const loadData = async () => {
  try {
    const users = await userService.getUsers({ page: 1, pageSize: 10 });
    console.log('获取到的用户:', users);
  } catch (error) {
    console.error('获取用户失败:', error);
  }
};

其中User的定义如下

// src/services/user-service.ts
export interface User {
  id: number;
  name: string;
  email: string;
  avatar?: string;
  createdAt: string;
  updatedAt: string;
}

Java 映射：

• Service 类 ≈ Spring 的 @Service 组件
• HTTP 请求 ≈ Spring 的 RestTemplate 或 WebClient
• Promise ≈ Java 的 CompletableFuture 或 Future

6. HTTP 客户端层 (HTTP Client Layer)

作用：处理所有HTTP通信，包含请求拦截、响应处理、错误统一

// HTTP客户端配置 - src/services/httpClient.ts
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
import { ApiConfig } from '../config/app';

class HttpClient {
  private instance: AxiosInstance;

  constructor() {
    this.instance = axios.create({
      baseURL: ApiConfig.baseURL, // 使用配置层的后端域名
      timeout: ApiConfig.timeout,
      headers: {
        'Content-Type': 'application/json',
      },
    });

    this.setupInterceptors();
  }

  private setupInterceptors(): void {
    // 请求拦截器
    this.instance.interceptors.request.use(
      (config) => {
        console.log(`🚀 发送请求: ${config.method?.toUpperCase()} ${config.url}`);
        
        // 添加认证token
        const token = localStorage.getItem('auth_token');
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        
        return config;
      },
      (error) => {
        console.error('❌ 请求配置错误:', error);
        return Promise.reject(error);
      }
    );

    // 响应拦截器
    this.instance.interceptors.response.use(
      (response: AxiosResponse) => {
        console.log(`✅ 请求成功: ${response.status} ${response.config.url}`);
        return response;
      },
      (error) => {
        console.error(`❌ 请求失败: ${error.response?.status} ${error.config?.url}`);
        
        // 统一错误处理
        if (error.response?.status === 404) {
          throw new Error('请求的资源不存在');
        } else if (error.response?.status === 500) {
          throw new Error('服务器内部错误');
        } else if (error.request) {
          throw new Error('网络错误，请检查网络连接');
        } else {
          throw new Error(error.message || '未知错误');
        }
      }
    );
  }

  // HTTP方法封装
  public async get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
    const response = await this.instance.get<T>(url, config);
    return response.data;
  }

  public async post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
    const response = await this.instance.post<T>(url, data, config);
    return response.data;
  }

  public async put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
    const response = await this.instance.put<T>(url, data, config);
    return response.data;
  }

  public async delete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
    const response = await this.instance.delete<T>(url, config);
    return response.data;
  }
}

export const httpClient = new HttpClient();

Java 映射：

• Axios 实例 ≈ Spring 的 RestTemplate 或 WebClient
• 拦截器 ≈ Spring 的 ClientHttpRequestInterceptor
• 错误处理 ≈ Spring 的全局异常处理

7. 完整的页面组件集成

// 🔥 对应：整个用户管理页面
const UserManagementPage: React.FC = () => {
  // 使用自定义Hook管理所有状态和逻辑
  const {
    users,
    loading,
    pagination,
    handleSearch,
    handlePageChange,
    handleDeleteUser
  } = useUserManagement();

  // 🔍 核心概念：条件渲染 - 根据状态显示不同内容
  if (loading && users.length === 0) {
    return (
      <div className="loading-container">
        <div className="spinner">加载中...</div>
      </div>
    );
  }

  return (
    <div className="user-management-page">
      {/* 页面头部 */}
      <PageHeader onSearch={handleSearch} />
      
      {/* 用户表格 */}
      <UserTable 
        users={users} 
        onDeleteUser={handleDeleteUser}
      />
      
      {/* 分页组件 */}
      <Pagination 
        current={pagination.current}
        total={pagination.total}
        pageSize={pagination.pageSize}
        onPageChange={handlePageChange}
      />
      
      {/* 🔍 核心概念：状态提升 - 加载状态提示 */}
      {loading && users.length > 0 && (
        <div className="loading-overlay">
          更新数据中...
        </div>
      )}
    </div>
  );
};

🔄 数据流动示意图：删除为例

1 删除操作的完整跨层流程：

1. 用户点击删除按钮 (组件层)
   ↓
2. 触发删除事件处理函数 (组件层) 
   ↓
3. 调用Hooks层的删除方法 (Hooks层)
   ↓
4. Hooks层调用服务层API (服务层)
   ↓
5. 服务层使用HTTP客户端发送请求 (HTTP客户端层)
   ↓
6. HTTP客户端处理后端通信 (HTTP客户端层)
   ↓
7. 后端Spring Boot处理删除逻辑 (后端系统)
   ↓
8. 返回响应结果 (HTTP客户端层)
   ↓
9. Hooks层更新前端状态 (Hooks层)
   ↓
10. 组件层重新渲染界面 (组件层)

用户操作触发 → 组件调用Hook方法 → Hook调用Service → HTTP请求后端
    ↓
界面更新 ← 组件重新渲染 ← Hook更新状态 ← Service返回数据

2 具体流程示例（删除用户）：

1. 用户点击删除按钮（组件层）

   <button onClick={() => onDeleteUser(user.id)}>删除</button>
   

2. 调用Hook删除方法（Hooks层）

   const handleDeleteUser = async (userId: number) => {
     await userService.deleteUser(userId);
     await loadUsers(); // 重新加载数据
   };
   

3. 调用Service方法（服务层）

   async deleteUser(userId: number): Promise<void> {
     await httpClient.delete(`/api/users/${userId}`);
   }
   

4. HTTP客户端发送请求（HTTP层）

   // 实际发送：DELETE http://api.example.com/api/users/123
   

5. 后端处理并返回（后端系统）

   // 返回：204 No Content
   

6. 更新界面显示（状态更新）

   // loadUsers() 重新获取数据，users状态更新，组件自动重新渲染
   

3 具体代码实现：

// 1. 组件层触发删除
<UserTableRow 
  user={user}
  onDeleteUser={handleDeleteUser} // 来自Hooks层的方法
/>

// 2. Hooks层处理删除逻辑
const handleDeleteUser = async (userId: number) => {
  setDeletingId(userId);
  try {
    await userService.deleteUser(userId); // 调用服务层
    // 乐观更新
    setUsers(prev => prev.filter(user => user.id !== userId));
  } catch (error) {
    setError('删除失败');
  } finally {
    setDeletingId(null);
  }
};

// 3. 服务层API调用
class UserService {
  async deleteUser(userId: number): Promise<void> {
    return httpClient.delete(`/users/${userId}`); // 使用HTTP客户端
  }
}

// 4. HTTP客户端发送请求
// 实际发送: DELETE http://localhost:8080/api/users/123
// 包含认证头、错误处理、日志记录等

🎯 核心概念总结

前端概念	对应页面效果	Java映射（近似）	作用
组件	页面上的各个UI块	类/对象	构建用户界面
useState	页面上的动态数据	成员变量	管理组件状态
useEffect	页面加载时的数据获取	@PostConstruct	处理副作用
async/await	异步操作等待	CompletableFuture	处理异步操作
Props	组件间的数据传递	方法参数	组件通信
自定义Hook	复杂页面的业务逻辑	Service类	逻辑复用

总结一下

React框架的一个初步了解，其实核心还是掌握框架分层及工作流程，主要有这么几层：配置层统一管理环境变量和类型定义，确保应用配置一致性（yml文件）；路由层负责页面导航和布局管理，实现单页应用流畅体验；组件层专注UI渲染和用户交互，构建直观的界面展示（Controller层）；Hooks层封装状态管理和业务逻辑，提供响应式数据流（Service层）；服务层处理API调用和数据转换，隔离前端与后端通信细节（Repo层）；HTTP客户端层统一处理网络请求，确保通信可靠性和错误处理（RPC服务）。整体和Java强行对应可能生搬硬套，但大概是有些对应关系