★ FEATURED ARTICLE 前端低代码【免费下载链接】fast-crud面向配置的crud框架开发crud 快如闪电超级表格Options-oriented crud framework, develop crud as fast as lightningbased on vue3super table项目地址https://gitcode.com/fast-crud/fast-crud点击查看免费下载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 个文件文件作用说明crud.ts字段配置核心所在每个 CRUD 最大的不同就是它index.vue页面组件固定模板直接复制改 nameapi.ts接口定义实际开发中替换为你的后端请求mock.ts模拟数据可选没有后端时用它跑通流程下面按顺序看怎么写官方完整示例在 docs/zh/guide/start/first.md#L22-L156。第 1 步crud.ts —— 只写字段配置保存为views/test/myFirstCrud/crud.tsimport { 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.vuetemplate fs-page fs-crud refcrudRef v-bindcrudBinding / /fs-page /template script langts 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(); // 页面打开后加载列表数据 }); /scriptuseFs会把createCrudOptions的配置转换成fs-crud组件可用的 propscrudExpose则暴露刷新、打开添加表单等方法供页面调用。第 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驱动actionbartoolbar添加按钮与工具条列设置、全屏、刷新tablerowHandle表格列与行内操作按钮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-i18n2️⃣ 在 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加个height800px试试。坑 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.mdCrudOptions 完整配置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 想给你的体验。动手写下你的第二个字段吧你会发现搬砖真的可以很快。赞分享前端低代码【免费下载链接】fast-crud面向配置的crud框架开发crud 快如闪电超级表格Options-oriented crud framework, develop crud as fast as lightningbased on vue3super table项目地址https://gitcode.com/fast-crud/fast-crud点击查看免费下载相关推荐Brick Design 快速上手指南10分钟搭建你的第一个可视化页面 Brick Design 快速上手指南10分钟搭建你的第一个可视化页面 Brick Design 是一个功能强大的低代码框架专为快速构建可视化页面而设低代码前端Fast-Crud颠覆传统开发模式的快速CRUD框架Fast Crud颠覆传统开发模式的快速CRUD框架 Fast Crud是一款面向配置的CRUD框架基于Vue3开发能够让开发者以闪电般的速度构建数据管理快速上手Svelte NodeGUI10分钟创建你的第一个桌面应用快速上手Svelte NodeGUI10分钟创建你的第一个桌面应用 想要用熟悉的Web技术构建原生桌面应用Svelte NodeGUI正是你需要的终极解决方创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
