Vue3 + Element Plus 前端 AI 编码模板
- 一、通用管理页面模板（最常用）
- [二、表格列 formatter + Tooltip 专用](#二、表格列 formatter + Tooltip 专用)
- [三、表单 + 校验模板](#三、表单 + 校验模板)
- 四、封装通用组件模板
- [五、修复 Bug 专用话术](#五、修复 Bug 专用话术)
- 六、优化代码专用话术
- [七、TS + Vue3 强化版](#七、TS + Vue3 强化版)
一、通用管理页面模板（最常用）
javascript
使用 Vue3 + <script setup> + Element Plus + Vite 语法，生成一个完整的 XX 管理页面。
要求：
1. 顶部有搜索区域，包含：关键词输入框、日期选择器、下拉筛选、搜索按钮、重置按钮
2. 中间是 el-table 表格，支持多选、序号列、操作列
3. 表格列包含：名称、状态、时间、操作
4. 底部有 el-pagination 分页
5. 有新增、编辑、删除按钮，点击弹出 el-dialog 弹窗
6. 弹窗内是表单，带校验规则
7. 接口用模拟的 async 函数
8. 代码规范、带注释、结构清晰、可直接运行
9. 状态列使用 el-tag 不同颜色显示
10. 时间列格式化，超长内容使用 el-tooltip 悬浮展示二、表格列 formatter + Tooltip 专用
javascript
帮我写一个 Vue3 + Element Plus 表格的 formatter 方法，要求：
1. 在 formatter 中使用 ElTooltip
2. content 支持渲染 HTML 富文本、行内样式
3. 显示多行文本、不同颜色文字
4. 不使用 h 函数、尽量简单
5. 内容包含状态文字和时间变量
6. 可直接放到 el-table-column 的 formatter 中使用三、表单 + 校验模板
javascript
使用 Vue3 + Element Plus 生成一个表单，包含：
1. 输入框、下拉框、单选、多选、日期选择器
2. 手机号、邮箱、密码强度校验
3. 自定义校验规则
4. 提交、重置功能
5. 表单布局美观，带 label 宽度
6. 完整的 ref 绑定、rules、submit 方法四、封装通用组件模板
javascript
帮我封装一个 Vue3 通用组件：XX组件
要求：
1. 使用 <script setup> 语法
2. 使用 defineProps / defineEmits / defineExpose
3. 支持父组件调用
4. 代码简洁、可复用、带注释
5. 样式 scoped，不污染全局五、修复 Bug 专用话术
javascript
这是我的 Vue3 代码：
【粘贴代码】
报错信息/问题描述：
【粘贴报错/描述问题】
帮我定位问题、修复代码，并解释原因，修复后的代码要完整可直接运行。六、优化代码专用话术
javascript
帮我优化这段 Vue3 代码：
【粘贴代码】
要求：
- 逻辑不变
- 更简洁、可读性更高
- 符合规范
- 加上必要注释
- 去掉冗余代码- List item
七、TS + Vue3 强化版
javascript
使用 Vue3 + TypeScript + Element Plus + 接口类型定义
生成 XX 功能，要求：
1. 完整 interface 类型
2. 类型约束完整
3. 无 any
4. 代码规范、可直接运行把上面任意一段复制
粘贴到 AI 工具里（豆包、Cursor、Copilot、通义灵码都行）
把「XX」替换成你的业务名称，比如：用户管理、订单管理、短信记录
可以直接按你的业务，给你生成一整套完整页面代码，你只要说一句：
- 要做什么页面
- 有哪些字段