25 利用 AI 辅助开发客户端应用

罗荣良利用AI辅助开发客户端应用本节学习目标1.配置VSCode的AI编程环境2.实战：用AI生成Vue3页面骨架(Template)3.实战：用AI编写组合式API逻辑(Script)4.实战：用AI调整CSS样式与布局5.技巧：生成Mock数据进行无后端开发前端开发vs后端开发的AI差异后端(Backend)：重逻辑、重算法、SQL生成。前端(Frontend)：1.重视觉：HTML结构、CSS布局。2.重交互：点击事件、表单校验。3.组件化：拆分父子组件。结论：前端更依赖“描述画面”的能力。工具准备：VSCodeAI插件推荐插件：1.腾讯CodeBuddy：中文友好，免费。本课演示使用：CodeBuddy。Prompt技巧：前端“画图法”公式：UI框架+布局描述+功能组件+数据结构示例：“使用ElementPlus，创建一个卡片网格布局，每个卡片包含学生头像、姓名、简介。右上角有一个添加按钮。”实战1：生成页面骨架(Template)操作：在.vue文件中打开对话框(Ctrl+I或Cmd+I)。Prompt："生成一个Vue3组件，使用<scriptsetup>语法。界面包含一个搜索栏和一个el-table。表格字段：姓名、年龄、性别、操作列（编辑/删除）。使用ElementPlus组件库。"实战2：生成交互逻辑(Script)场景：表格有了，需要数据和点击事件。Prompt："为上面的表格定义响应式数据tableData，并生成handleEdit和handleDelete方法的骨架。注意：使用TypeScript接口定义User类型。"实战3：生成Mock数据痛点：后端接口还没写好，前端没法测。Prompt："生成10条模拟的User数据填充到tableData中，包含真实的中文姓名和随机年龄，用于页面展示测试。"实战4：CSS样式微调场景：按钮贴在一起太丑了。Prompt："操作列的两个按钮靠得太近了，请让它们之间保持10px间距，并且整体居中显示。"实战5：组件拆分场景：一个文件写了500行，太乱。操作：选中<el-dialog>部分代码。Prompt："将这个弹窗部分提取为一个独立的子组件StudentDialog.vue，并通过props和emit与父组件通信。"实战6：解决报错场景：代码飘红，报类型错误。操作：鼠标悬停报错处Prompt："解释这个TypeScript错误，并给出修复代码。"Vue3特有“坑”的规避1.Ref解包：AI容易忘记.value。2.生命周期：AI可能混用Vue2的created和Vue3的onMounted。3.UI库版本：确保AI知道你用的是ElementPlus(Vue3)而不是ElementUI(Vue2)。前端AI开发工作流1.想：脑海中构思画面。2.描：用自然语言描述布局。3.生：AI生成骨架和Mock数据。4.调：人工微调样式和逻辑。5.接：最后替换为真实后端接口。本节演示项目概览我们将在接下来的实战视频中，利用本节课的技巧，快速完成“学生管理系统”的前端页面开发。目标：把原本需要2小时的页面编写压缩到30分钟。本节小结与作业小结：VSCode插件安装、UI描述生成、M