fitten code 插件可快速生成 vue crud 模块。需安装、全局注册，并遵循 restful 接口规范；支持自动推导或显式配置字段，提供表单验证、分页列表及自定义操作。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
在 Vue.js 项目中快速生成带表单验证、分页列表、增删改查逻辑的 CRUD 模块，避免重复手写 API 调用、表格渲染和弹窗管理代码。
安装并注册 Fitten Code 插件
打开终端，进入项目根目录，执行安装命令：
npm install fitten-code --save
在 src/main.js 或 src/main.ts 中引入并全局注册插件：
import { createApp } from 'vue'import App from './App.vue'import FittenCode from 'fitten-code'const app = createApp(App)app.use(FittenCode)
这一步必须完成，否则后续组件无法识别 <fitten-crud></fitten-crud> 标签。
定义后端接口规范
Fitten Code 默认要求后端提供标准 RESTful 接口，路径需满足以下约定：
列表：GET 【/api/users】
新增：POST 【/api/users】
详情：GET 【/api/users/{id}】
更新：PUT 【/api/users/{id}】
删除：DELETE 【/api/users/{id}】
响应格式必须为 { code: 0, data: {...}, message: '' }，其中 【code 为 0 表示成功】，非 0 将触发错误提示。不满足该结构会导致请求无反馈或报错中断。
在页面中嵌入 CRUD 组件
方法一：基础用法（自动推导字段）
在 .vue 文件的 <template></template> 中直接使用：
<fitten-crud api="/api/users"></fitten-crud>
组件会自动发起 GET 请求，解析返回的 data 数组第一项，生成列名与表单项。适用于后端已返回完整字段结构的场景。
方法二：显式配置字段（推荐）
当后端返回结构复杂或需自定义展示时，用 columns 和 formFields 明确声明：
<fitten-crud><br><code> api="/api/users" :columns="[ { label: '姓名', prop: 'name' }, { label: '邮箱', prop: 'email' }, { label: '状态', prop: 'status', type: 'tag' } ]" :formFields="[ { label: '姓名', prop: 'name', required: true }, { label: '邮箱', prop: 'email', type: 'email' } ]"/>
注意：type: 'tag' 会将数值映射为标签色块，type: 'email' 自动添加邮箱格式校验——这些类型直接影响 UI 渲染和表单行为，填错会导致输入框失效或样式异常。
定制操作栏与事件响应
第一步：隐藏默认操作列，改为自定义按钮组
在 <fitten-crud></fitten-crud> 上添加 show-operation="false" 属性，关闭内置编辑/删除按钮。
第二步：在模板中插入独立按钮，并绑定事件
<el-button>批量审核</el-button>
第三步：在 setup() 或 methods 中实现逻辑
const handleCustomEdit = (row) => { FittenCode.api.put(`/api/users/${row.id}`, { status: 1 }) .then(() => { FittenCode.message.success('审核成功') crudRef.value.refresh() })}
调用 refresh() 是刷新列表的唯一可靠方式，直接修改本地 data 不会触发分页重载。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
