企业官网建设流程全解析

• 前端
• 低代码

fast-crud 是一个基于 Vue3 的面向配置的 CRUD 开发框架，只需编写一段字段配置，就能生成包含查询、表格、表单、分页的完整增删改查页面。本教程带你 10 分钟走完「运行示例 → 编写新 CRUD → 集成到自己的项目」全流程，从此告别重复搬砖。

一、为什么说 fast-crud 开发 CRUD 快如闪电

管理后台里大量的页面是标准的增删改查：一个查询区 + 一个表格 + 添加/编辑表单 + 分页。传统写法要手写表单、手写列、手写接口调用，一个页面几百行。

fast-crud 的思路是面向配置：你只描述「有哪些字段、每个字段什么类型」，框架自动帮你生成查询表单、表格列、表单控件和操作按钮。比如一个带字典下拉的字段，只需这样：

status: { title: "状态", type: "dict-select", // 字段类型，自动生成对应组件 search: { show: true }, // 该字段出现在查询区 dict: dict({ data: [ { value: 1, label: "启用" }, { value: 0, label: "停用" } ] }) }

它还有几个新手友好度很高的特性：

• 数据字典：支持本地 / 远程字典，表格存 value、展示 label，颜色 tag 自动带
• 字段类型：text、number、dict-select等几十个类型，配置即省略
• 多 UI 支持：Element Plus、Ant Design Vue、Naive UI 四选一，配置方式完全一致

📖 更多特性说明见仓库 README.md，字段类型详解见 docs/zh/guide/advance/column-type.md。

二、先运行示例：最快的 fast-crud 上手方式

强烈建议先在官方示例里感受一把，再动手写。仓库采用 monorepo 结构，示例工程以子模块方式放在packages/fast-admin下：

git clone https://gitcode.com/fast-crud/fast-crud cd fast-crud pnpm install # 需要 node >= 20.10、pnpm >= 8.15.7 pnpm run init # 初始化 admin 示例子模块 # 以 Ant Design Vue 版示例为例（Element Plus 版为 fs-admin-element） cd packages/fast-admin/fs-admin-antdv npm install npm run dev

启动成功后打开终端输出的链接，就能看到包含几十个 CRUD 示例页面的管理后台，随便点进一个「CRUD 示例」，感受下查询、新增、编辑、删除一气呵成的体验。

三、一个 CRUD 页面的四件套

在示例工程里，每一个 CRUD 功能就是views下的一个目录，固定 4 个文件：

下面按顺序看怎么写，官方完整示例在 docs/zh/guide/start/first.md#L22-L156。

第 1 步：crud.ts —— 只写字段配置

保存为views/test/myFirstCrud/crud.ts：

import { CreateCrudOptionsProps, CreateCrudOptionsRet, dict } from "@fast-crud/fast-crud"; import { addRequest, delRequest, editRequest, pageRequest } from "./api"; export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet { return { crudOptions: { request: { pageRequest, addRequest, editRequest, delRequest }, columns: { name: { title: "姓名", type: "text", // 文本字段 search: { show: true }, // 出现在查询区 column: { width: 200 } }, type: { title: "类型", type: "dict-select", // 字典下拉字段 dict: dict({ data: [ { value: 1, label: "开始" }, { value: 0, label: "停止" } ] }) } } } }; }

就这么多 —— 两个字段，查询、表格列、表单、操作按钮全部自动就位。想加字段就往columns里继续写。

第 2 步：index.vue —— 固定模板直接抄

保存为views/test/myFirstCrud/index.vue：

<template> <fs-page> <fs-crud ref="crudRef" v-bind="crudBinding" /> </fs-page> </template> <script lang="ts" setup> import { onMounted } from "vue"; import { useFs, useFsRef } from "@fast-crud/fast-crud"; import createCrudOptions from "./crud"; const { crudRef, crudBinding, context, crudExpose } = useFsRef(); await useFs({ crudRef, crudBinding, crudExpose, context, createCrudOptions }); onMounted(() => { crudExpose.doRefresh(); // 页面打开后加载列表数据 }); </script>

useFs会把createCrudOptions的配置转换成<fs-crud>组件可用的 props，crudExpose则暴露刷新、打开添加表单等方法供页面调用。

第 3 步：api.ts —— 接上你的后端

示例工程里用本地 mock 模拟接口（见 skills/fs-crud-builder/assets/basic-crud/mock.ts），实际开发只需替换为真实请求。四个方法各司其职：

• pageRequest：分页查询，需返回{ records, currentPage, pageSize, total }
• addRequest/editRequest/delRequest：新增、修改、删除

完整可运行的 api 示例参考 skills/fs-crud-builder/assets/basic-crud/api.ts 与 docs/zh/guide/start/first.md#L111-L153。

最后给页面挂上路由菜单，启动项目访问，就能看到：

🎉 恭喜，查询、表格、添加、编辑、删除、分页，一个完整体 CRUD 已经跑起来了。

四、读懂 fs-crud 的页面结构

上面的页面看起来内容很多，其实由 6 个区块组成，每个区块都对应crudOptions里的一段配置：

• search：查询区，由columns[*].search驱动
• actionbar+toolbar：添加按钮与工具条（列设置、全屏、刷新）
• table+rowHandle：表格列与行内操作按钮
• pagination：分页，自动对接pageRequest

完整配置总览见 docs/zh/guide/advance/struct.md#L42-L44，核心组件源码在 packages/fast-crud/src/components/fs-crud.vue。

五、把 fast-crud 集成到你自己的 Vue3 项目

在示例里玩爽了，接下来集成到自己的 admin 项目，核心就 4 步：

1️⃣ 安装依赖（UI 适配包按你用的组件库四选一）：

pnpm i @fast-crud/fast-crud pnpm i element-plus @fast-crud/ui-element # 或 ui-antdv / ui-antdv4 / ui-naive pnpm add dayjs @iconify/vue lodash-es vue-i18n

2️⃣ 在 main 入口引入：

import { FastCrud } from "@fast-crud/fast-crud"; import "@fast-crud/fast-crud/dist/style.css"; import ui from "@fast-crud/ui-element"; app.use(ui); app.use(FastCrud, { // 后台接口结构与 fs 不一致时，在这里做统一转换 commonOptions() { return { request: { transformRes: ({ res }) => ({ ...res }) // 转成 {records,currentPage,pageSize,total} } }; } });

3️⃣ 写 CRUD 页面：把第三节的三个文件复制到你的views，改好api.ts指向真实后端即可。

4️⃣ 给页面设置高度（下面会说，90% 的「表格看不见」都在这）。

📖 完整集成步骤与注意事项见 docs/zh/guide/start/integration.md。

项目已集成好主流 admin 框架的 starter 可直接开箱即用，例如 Element Plus 版与 Naive UI 版的效果：

六、新手最容易踩的 3 个坑

坑 1：表格一片空白？fs-crud默认高度为100%，父容器没有高度时就看不见表格。给外层容器设置高度，或先给<fs-crud>加个height="800px"试试。

坑 2：接口返回结构和预期不一样？正常现象。在app.use(FastCrud)的commonOptions里统一配置request.transformQuery/request.transformRes做一次转换，所有 CRUD 页面就都通了，不用每个页面单独处理。

坑 3：远程字典不生效？远程字典（dict({ url: "..." })）需要在安装时配置公共的dictRequest方法，根据dict.url返回字典数组，配置方式参考 docs/zh/guide/start/integration.md#L90-L140。

七、接下来学什么

10 分钟你只掌握了「能跑」，这些进阶内容会让 CRUD 更强大：

• 字段类型：了解每种type背后代表的默认配置，docs/zh/guide/advance/column-type.md
• CrudOptions 完整配置：search、toolbar、form、slots 逐项详解，docs/zh/guide/advance/struct.md
• 扩展组件：文件上传、富文本、JSON 编辑器等，源码在 packages/fast-extends/src/
• API 参考：columns、request、form等全部配置项，docs/zh/api/crud-options/columns/column.md

从配置到页面，快如闪电 —— 这就是 fast-crud 想给你的体验。动手写下你的第二个字段吧，你会发现搬砖真的可以很快。

• 前端
• 低代码