约定驱动、企业级 React 框架

VEF Framework React

文档聚焦如何使用 `@vef-framework/*` 导出的 API 来构建应用，覆盖路由、请求、表单、CRUD 页面以及审批流集成。

阅读总览打开快速开始

应用层Starter@vef-framework/starter

启动 · 路由 · 布局 · CRUD

UI 层Components@vef-framework/components

表单 · 选项 · 图表 · 图标

数据层Core@vef-framework/core

请求 · 查询 · store · atom

工程工具Dev@vef-framework/dev

Vite · ESLint · Stylelint · Commitlint

应用入口

import { createApp } from "@vef-framework/starter";
import { apiClient } from "./api";
import router from "./router";

createApp().render({
  apiClient,
  router,
  appContext: {
    dataDictQueryFn: findDataDictItems,
    fileBaseUrl: FILE_BASE_URL
  }
});

应用通过声明式配置统一管理路由、认证和主题。
内置 CRUD 构建器、表单引擎和权限系统，消除重复样板代码。
约定优于配置：合理的默认值，完整的覆盖能力。

主流程

先建立应用骨架，再在其上构建业务

理解 VEF 最有效的方式，是按真实应用的形状来：先启动骨架、再组装运行时，然后在其上构建页面。

建立基础层

通过 defineViteConfig、ESLint 和 Stylelint 一次性建立工程基础。

组装主运行时

创建 apiClient、router 和应用入口，让认证、权限、query 和路由协同工作。

在其上构建页面

普通页面使用 Page，数据密集页面使用 ProTable，CRUD 流程使用 CrudPage 与 createCrudKit。

核心表面

这些 API 表面最值得先掌握

这些能力覆盖了最常见的应用任务，也是框架中最核心、最稳定的部分。

STARTER

应用入口与布局

createApp、createRouter、登录路由、无权限路由、Page、ProTable 和 CrudPage 都位于应用主骨架中。

CORE

请求、缓存与状态

ApiClient、useQuery、useMutation、createStore、createComponentStore 和 atom 构成页面级数据层。

COMPONENTS

组件、表单与主题

组件体系已经与主题、通知、表单字段、权限和选项转换深度集成。

CRUD

可复用 CRUD 页面

为搜索区、表格、表单场景、删除流程和批量操作提供统一 API。

HOOKS

页面级辅助 Hooks

数据字典、选项转换、权限检查、加载态判断和常用交互 hooks 都集中从这里导出。

FLOW

审批流编辑器

可以独立嵌入，并通过插件扩展用户、角色、部门和表单字段等能力。

推荐入口

一条更实用的阅读路径

这四个页面是理解框架结构并快速进入实现工作的最好起点。

从安装开始

先确认依赖、运行环境和最小项目骨架。

查看最小应用骨架

顺着 createApp、createApiClient 和 createRouter 走完整个最小启动链路。

阅读 CRUD 页面指南

这是理解管理后台搜索区、表格和表单场景的一个很好入口。

浏览包级 API 地图

当你从需求反推应该看哪个包、哪个入口时，这页最有帮助。