🎯 Vue 2 + JavaScript 专用 AI Prompt 模板合集
⚙️ Vue 2 组件开发
| 场景 | Prompt |
|---|---|
| 编写组件 | 帮我写一个 Vue 2 的分页组件，支持传入 total、pageSize、currentPage。 |
| 增加 props 类型校验 | 请为这个 Vue 2 组件补充 props 的类型校验。 |
| 添加生命周期注释 | 解释一下这个组件每个生命周期函数是做什么的。 |
| 抽离逻辑 | 把这个 Vue 2 组件中的业务逻辑提取到一个 mixin 中。 |
🧩 Vue 路由 & Vuex
| 类型 | Prompt |
|---|---|
| Vue Router 配置 | 帮我配置一个 Vue Router，支持登录页、首页、404 页面，并有嵌套路由。 |
| Vuex 基础结构 | 用 Vuex 写一个用户模块，包含登录、登出、获取用户信息的 action。 |
| 状态同步 | 解释 Vuex 中 mapState 和 mapMutations 的区别及用法。 |
🔄 数据交互 & 表单处理
| 类型 | Prompt |
|---|---|
| 表单验证 | 用 VeeValidate 实现一个注册表单，包含用户名、邮箱、密码验证。 |
| 接口调用逻辑 | 封装一个 API 请求模块，用 axios，在 Vue 组件中使用。 |
| loading 状态处理 | 为这个异步操作添加 loading 状态逻辑，并在按钮上显示 loading 效果。 |
🎨 UI & 动画
| 类型 | Prompt |
|---|---|
| 元素动画 | 使用 Vue 的过渡动画让这个列表在添加/删除时有平滑过渡效果。 |
| Element UI | 用 Element UI 写一个弹窗组件，支持 slot 插入表单内容。 |
| 响应式布局 | 请优化这个 Vue 页面在手机上的显示效果，改成响应式布局。 |
🧠 Bug 修复 & 优化建议
| 类型 | Prompt |
|---|---|
| 找 bug | 为什么这个组件的 mounted 没有触发？帮我排查。 |
| 组件卡顿 | 这个组件在列表很长的时候会卡顿，帮我优化一下。 |
| 依赖冲突排查 | vue-cli 项目中引入 xxx 报错，可能是依赖冲突吗？该如何解决？ |
✅ 单元测试
| 类型 | Prompt |
|---|---|
| 基础测试 | 为这个 Vue 组件写一个简单的单元测试，使用 jest + vue-test-utils。 |
| 模拟 API | 如何在单元测试中 mock 掉 axios 请求？ |
📘 项目结构建议
| 类型 | Prompt |
|---|---|
| 目录设计 | 给我推荐一个中型 Vue 2 项目的文件结构，包括组件、api、store 等。 |
| 代码规范 | 帮我生成一份适用于 Vue 2 项目的 ESLint 配置。 |
