Vue企业开发实战（第2版）-课件 项目11 AI编程辅助与应用实践

《Vue企业开发实战》·Vue3企业级项目教程项目11AI编程辅助与应用实践任务1认识工具·任务2生成组件·任务3优化任务4综合应用（核验后才能交）授课教师：XXX辅助开发·必须核验·禁止原文粘贴学习目标会对结果负责：描述→生成→核验→改写→说明01认识边界工具辅助写、读、调、优化，不能替代设计与核验02会描述需求提示词写清项目、字段、props、事件、不要什么03会生成会改分步生成大觅组件，对照约定字段改写入库04会甄别建议审查、性能、安全：不是AI说了就必须改05闭环可交小功能能演示；说明哪些是AI写的、自己改了哪项目知识导图四个任务共用一条责任线任务1认识工具Copilot/Cursor/通义灵码，初体验任务2生成组件提示词、猜你喜欢、生成后改写任务3分析优化审查、性能、安全，建议要甄别任务4综合应用需求到文档，人必须确认每一步项目导读能跑但字段不对，直接提交不行AI能辅助补全、解释、出骨架，不能代替核验。教材所列工具只是示例，不要求必须用某一款。交付物永远带着说明：提示词、改了什么、还剩什么风险。禁止把生成结果原文粘贴当作业。密钥、账号、真实用户数据不要贴进提示词。规矩先立诚实使用，课堂禁止原样提交。改写字段对齐大觅：itemName/minPrice。分步一次要列表+筛选+分页，结构容易乱。责任演示时必须指出自己改的那一段。TASK01认识AI编程辅助工具01是什么02主流工具03功能与初体验11.1.1是什么核心目标不是替代开发者完成程序设计用智能化手段辅助编写、理解、调试和优化，提高效率和质量。和翻文档、搜资料不同：用自然语言描述需求，换代码示例、说明或修改建议。01能做出示例、解释报错、起草测试和文档、补全重复代码。02不能做代替你对字段、安全和能否运行负责。03门槛降低学习和开发门槛，但人仍要专注业务和系统设计。04含糊需求会换来错误输出。导入用一段能跑但字段与大觅不一致的代码。11.1.2主流工具（示例，不指定必须用哪款）场景不同，责任相同GitHubCopilotVSCode插件。根据上下文补全、出函数和组件示例。结果要结合业务改。Cursor以对话改代码为主。可按Vue3组合式API出示例、解释、修改。仍须验证。通义灵码等企业向：规范检查、安全提示。教学阶段作了解，按课堂环境选用。11.1.3安装要点（课堂能用即可）认证、模型、项目上下文；不要为装工具消耗整节课Copilot•GitHub账号；VSCode建议1.60+•开通权限（学生可申请教育版）•扩展商店搜GitHubCopilot•或：code--install-extensionGitHub.copilot•首次登录授权；可关部分语言建议Cursor•官网下载对应系统安装包•选模型（可用默认）•偏好设为Vue3scriptsetup•配置项目上下文，生成才贴dm•建议当参考，禁止未分析就复制11.1.4主要功能（带教材示例）补全、由注释生成、对话生成、解释重构//示例1补全constuserList=//可能补出ref([])//示例2注释生成函数//根据价格过滤，返回低于maxPrice的商品functionfilterProductsByPrice(products,maxPrice){returnproducts.filter(p=>p.price<maxPrice)}//示例3对话：要一个商品列表SFC//含图、名、价、加入购物车按钮课上怎么用•补全要看建议是否符合约定字段•生成的是JS还是TS，按工程改•选中代码问：有什么问题？•重构建议要能说出采纳或拒绝理由•大觅购物车字段不要照搬product好的需求描述：五条，而不是“写个组件”对照商品卡片，接到大觅字段在哪用哪个项目、哪个页面，例如dm的列表页猜你喜欢。哪些字段对齐约定：itemName、minPrice、imgUrl、id，不要自己发明。接口props/事件：点卡片跳详情，emit或router.push带id。不要什么不要假接口名、不要乱加未装的依赖、不要Vue2选项式当默认。怎么验收能挂到现有路由/父页面，控制台无错。上机1初体验交付提示词+问题列表，不是只交代码要求•完成课堂环境或指定工具初体验•用自然语言描述一个小需求并获得示例•用清单挑出至少两处要改的地方•问题要具体到字段或规范，不能只写“不好”•记录提示词，下次生成还要用合格能说清边界。含糊需求看错误输出是本课设计，不是失败。未指出问题直接交代码，不合格。TASK02辅助生成Vue3组件01思路02提示词03优势与局限11.2.1基本思路组件=模板+逻辑+样式；AI给的是起步，不是成品说明“要一个展示列表的组件”，它往往能给出template、scriptsetup和基本ref。不一定符合大觅，必须分析再改。01先卡片一张票的展示和props，不要一次生成整站。02再列表v-for和key，接项目5的字段。03再筛选/分页条件与事件；每步能运行再往下。04流程生成—分析—修改—验证。示例4商品卡片提示词（要改成大觅）写得越具体，越少返工；仍要核验创建Vue3SFC，scriptsetup。通过props接收演出对象：id,itemName,imgUrl,minPrice,description。模板：海报、名称、价格（如99元）、描述最多两行、立即购买按钮，点击emit('buy',id)。不要使用TypeScript（本课工程是JS）。不要引入未安装的UI库。style使用scoped。字段名必须与大觅列表接口一致，不要用name/price。生成后先核验这几项能跑不等于能入库01引用能否在dm里import，路径是不是@/components。02字段是否叫itemName/minPrice；formatPrice是否符合“元”。03数据流有没有直接改props；buy是否emit而不是写死跳转。04多余物假接口、未装依赖、Vue2语法、破坏现有布局的CSS。11.2.4优势与局限加快搭结构、降低入门难度；不懂业务、偏通用示例优势•SFC三块能一次摊开•给组合式API示例•减少重复样板代码•适合对照着改，而不是对着空白文件发呆局限•不懂大觅约定和现有路由•可能引入不必要逻辑•直接使用会埋隐患•复杂组件必须分步，一次要太多会乱上机2生成“猜你喜欢”并改写教材：列表、加载、错误、点进详情要求•写详细需求：功能、props、事件、样式、不要什么•生成组件后对照大觅字段改名•加上loading/error；点击跳详情带id•可加简单过渡，不要为动画引入新库•提交三列表：生成结果/我的修改/原因合格能在页面引用。原文粘贴、字段仍是name/price、直接改props，不合格。TASK03分析并优化业务逻辑01审查02性能03安全11.3.1什么时候请它看代码逻辑在scriptsetup：处理数据、事件、状态01报错不直观把报错和相关文件一起问，不要只贴一句undefined。02能跑但难看重复逻辑、嵌套过深、模板里堆计算。03性能隐患列表很大时的无谓重算；本课几条数据不必上虚拟滚动。04安全v-html、密钥、把token打进日志。审查示例：订单金额AI指出问题后，你要能判断对不对//常见问题（示意）lettotal=0for(constrowofcart){total+=row.price*row.count}//可能被建议改成computed//还可能指出：价格是字符串、未处理空车//课上要问自己：//这是项目8已经练过的，建议是否重复？//有没有让我装不该装的库？甄别•对的：抽成computed、空数组兜底•过的：几条数据就上虚拟列表•错的：在computed里发请求•落实一处优化，写采纳或拒绝理由•所有测试/演示用例仍要能走安全与最佳实践密钥、XSS、明文密码，课堂零容忍01不要把百度地图ak、接口密钥贴进提示词或提交git。02不要对来路不明的字符串用v-html。03不要在前端写死鉴权“只要本地有token就算管理员”。04要生成代码里若出现上述内容，必须删掉并写进核验说明。上机3审查现有代码并优化一处对准课标：禁止原文粘贴建议要求•选一段大觅相关逻辑（列表、购物车、登录）•让AI审查，列出建议•落实一处优化，其余写拒绝理由•优化前后对比：可读性或正确性，不空谈性能分数•确保页面仍能演示合格有“建议/我的决定/原因”三列。全盘照改或完全不改又不说明，不算过。TASK04项目中的综合应用01五步流程02控制范围03文档与收束11.4.1每个环节都要人确认工具嵌入已有流程，不另搞一套电商评价平台教材用“商品评价”演示需求分析。课上把范围收成大觅小功能：收藏、空态、简单评价里做一块。01需求一句话说清，如“个人中心可收藏演出”。AI出的模块表要人工删掉用不到的。02骨架是否新页面、新路由、新组件；不要让它重构整站。03逻辑数据在本页还是Pinia；登录校验仍走已有store。04测试文档怎么演示；文档里的接口路径必须人工对Mock。控制范围2课时能完成，比空喊“用AI做完大觅”有用可以做收藏、简单评价、空态提示、猜你喜欢改写中的一块。必须能挂到现有路由。不要做整站重构、新后台、未学的完整鉴权、无限滚动评价社区。演示必须指出哪一段是自己改的。抽查就问这一句。文档也要核验AI写的README/接口说明经常过时或虚构01路径文档里的/api/xxx是否真的存在于mock。02字段是否仍在用name而工程已是itemName。03启动端口、npm脚本是否与当前Vite一致。04使用示例可以让它起草，演示步骤必须人走过一遍。上机4综合验收合格：能运行、有说明、能讲清责任要求•选定一个限定范围的小功能•按需求→骨架→逻辑→核验→说明做完•提交：需求、提示词、生成摘要、修改点、剩余风险•抽查时回答：你改了AI结果的哪一处•用三句话总结项目1到11的能力增长合格禁止原文粘贴。没有核验说明，即使能跑也不算项目11合格证据。课程收束后续课程：网站框架开发从搭工程到对生成结果负责•项目1–3：工程、ES6、路由，把大觅页面串起来•项目4–8：声明式、指令、组件、computed/watch•项目5、9：Mock/Axios、地图、Pinia、二维码•项目10：主路径能演能讲•项目11：AI只是辅助，人对字段、安全和能否运行负责•归档工程与核验说明，作为本课程过程证据本项目小结描述→生成→核验→改写→