Vue企业开发实战（第2版）-课件 项目10 大觅项目总结

《Vue企业开发实战》·Vue3企业级项目教程项目10大觅项目总结任务1起步回顾·任务2技能点与主路径联调授课教师：XXX规范·对照工程·能演能讲·主路径优先学习目标能交接、能填矩阵、能演示购票主路径01对照规范按清单检查目录、命名、启动方式，别人十分钟能跑起来02对照架构能指出分层、分离、模块化在dm工程里的位置03按页映射写出页面-技能点-完成度，主路径优先于装饰04能演能讲走通导航→列表→详情→选座→确认/支付，每页两个技术点05诚实报错卡点当场排，全填“完成”却无法演示则表作废项目知识导图综合课不是放松课：体检→填表→联调任务1大觅项目起步规范、架构、ES6、Vue3落点任务2梳理技能点框架配置+按页查漏演示主路径联调补洞、互测、口述技能点项目导读新同学克隆你的dm，十分钟内能否跑起来、找到列表页？项目1到项目9的分项技能已经学完。本项目按页面对技能点做归纳，把分散能力收成一条可交接的工程：规范在不在、每页用了什么、主路径能不能走。接口定义文档仍可用来自己Mock出数。体检对照自己的dm目录和脚本。矩阵完成/部分/未做，要有证据。演示按脚本走，不隐藏报错。作业综合运用Vue3、ES6和插件完善页面。TASK01大觅项目起步回顾01开发规范02架构03ES6/Vue3落点10.1.1为什么先订规范多人合作，没有规范就没有一致性01协作效率代码风格一致，降低维护成本，改善多人协作。02新人上手目录、命名、启动方式写清楚，新同学找得到列表页。03质量遵守最佳实践，页面性能和代码质量才有底。04本课动作打开真实仓库逐项勾，而不是空口背规范名词。开发规范清单别人能不能npmi&&npmrundev项要求目录views/components/router/api/store分得清命名组件大驼峰，path小写，不要中文文件名脚本package.json里dev/build能用，端口看终端说明README：如何启动、默认首页是谁静态Vite下静态资源在public，不要再找static架构对照工程分层、分离、模块化分别在哪；细节回看项目1三种思想•分层：页面、组件、请求、状态各管一段•分离：前端纯页面+接口；开发靠代理和Mock•模块化：一个.vue一个模块，router/store也是•打开看：vite.config、router/index.js、components•版本管理教材提到代码托管，课上能git启动即可图10.4框架搭建及配置（UI按项目1：ViewUIPlus）ES6在项目里的落点对照项目2，不要空口背语法落点let/const组件里优先const，循环或要改的用let箭头函数方法、then、计算属性回调解构从接口对象取id、itemName、minPrice模块import组件、路由、封装好的http、storePromiseAxios的then/catch，onMounted取数Map选座页用Map存座位状态（教材明确写出）ES6技能点总览图10.2：对照上一页落点，能指到文件才算会Vue3要点回顾对照项目4–9，能指到文件才算会01SFC与指令插值、v-if、v-for、v-model、:class/:style。02组件三件套props、emit、slot；标题栏和票卡。03派生与副作用总价computed，页码/登录变化watch。04插件Router、Axios、Pinia、百度地图、QRCode，按需。上机1工程体检对照表完整，至少改一处要求•工程能npmrundev启动，端口以终端为准•填写“规范-我的工程”对照表•修正至少一处命名或结构问题•写出启动步骤和默认首页•只口头说不改文件不算完合格可启动、对照表完整。没有README、中文文件名未改、脚本失效，要标到表上。TASK02梳理技能点与综合演示01公共技能02按页填写03联调10.2.1框架配置再勾一次这些不通，后面页面都白做01Vite/依赖能启动；ViewUIPlus、Axios、vue-router、pinia按需在package.json里。02路由首页重定向、主路径path在，App里有router-view。03代理/Mock列表或详情能出mock，字段对得上。04公共模块公共样式、共用组件已抽；store若用了要use。10.2.2先写公共技能点各页都会用到的，矩阵里先打底几乎每页都可能出现•单文件组件+scriptsetup；路由跳转（link或push/replace）•Axios取数放onMounted；失败有提示•v-for+稳定key；条件渲染空态/登录态•ViewUIPlus布局组件（Grid/Button/Message等）按页选用•ES6：const、箭头、解构；不要把公共项重复写进每一页的“特有技能”里充数首页特有技能搜索进列表、轮播、今日推荐、楼层•搜索框：v-on点搜索，编程式路由携带关键字跳到列表•轮播：ViewUIPlus的Carousel•今日推荐：Tabs，内部v-for•楼层：Grid布局，内部列表再v-for•计算属性：列表出来后算每行显示几个•抽查关键词：redirect到首页、router.push带query注册页/登录页Form+校验+友好提示；登录还要管状态注册•ViewUIPlus的Form布局•validator：密码长度、验证码•不符时Message提示•不要让错误请求直接甩堆栈登录•Tabs+Form•校验手机号、密码•Pinia保存登录态/token•未登录购票→登录→再回到原页（redirect）列表页特有技能筛选、两种视图、点进详情01筛选接口数据v-for；Date-picker做日历；点条件重新带参请求。02列表本体遍历接口数据；大图/列表两种展示。03切视图:class/:style+v-on传不同参数切换样式。04抽查没有v-for和稳定key不算完成；Axios/mock要对上字段。详情页/选座页主路径中间两段，最容易只“看起来像”详情•列表带来的id，Mock出详情•Tabs、Modal（ViewUIPlus）•评论、历史浏览：接口+v-for•售罄用v-if；query.id刷新还在•抽查：query、插值、条件选座•头、选座区、结算、图例四块•选座区可拖曳、可放大•ES6Map存座位状态•可售/已售经props进来•单击添加、再单击删除；push进确认确认/支付/微信码能回的用push，不该回的用replace订单确认•Table+Button•常用购票人组件•同意条款才能下一步（Tooltip）•买3张却只选2人要提示确认支付•Table展示订单号、品名•支付宝：本质跳转地址•微信：出二维码•提交后replace，避免改表单微信支付页•技术少但必须出码•QRCode+链接来自后台或模拟•订单号可来自Pinia•空串不要生成个人中心/栏目页中心三块Tab；五个栏目页技术相同个人中心•订单管理、个人信息、常用购票人•Table筛订单号/品名/时间•个人信息：Input、Upload•购票人：Table+新建•布局简单，不要漏登录态体育/舞蹈/亲子/摇滚/戏剧•只是类目不同，技术一致，像首页•日历：当月、上月下月、星期、天数排列•先搭结构，再算当月天数，再绑切换事件•不要复制五套互不相干的组件完成度怎么填列表页没有v-for就不算完成01三种即可完成/部分/未做。全填完成却无法演示，表作废。02要有证据打开对应文件指出指令或组件，不要凭印象。03优先级主路径缺口必须标出；装饰性功能往后排。04拆任务未做项写成下次可执行的三件事。演示脚本与抽查关键词先点哪、期望看到什么；每页只抓两个词1打开站点→落到首页2搜或点栏目→列表（v-for+mock）3进详情（queryid、售罄v-if）4选座（Map/props）→确认（条款）5支付：说明replace；微信则出码首页：redirect、router-link/push列表：v-for+key、Axios详情：query、插值确认/支付：replace、QRCode或跳转联调卡点顺序•起不来：依赖、端口、语法•切不过去：path、view、push•没数据：代理、mock、字段、catch•讲不清：关键词事先写在脚本上•互测：听的人用矩阵打勾上机2矩阵+演示合格线：主路径可走，能说明技能点要求•填完页面-技能点矩阵，主路径缺口必标•写出演示脚本（第一步和最后一步要能说）•按脚本走通关键步骤，分组互测•口述各页技能点，每页至少两个知识点•卡点当场排，不隐藏报错合格主要页面可切换，关键数据能出现。只能打开首页、中途报错未处理、只会操作不能说明，不算过。购票主路径一张表缺一页，演示就会断步骤页面关键技术（每页抓两个）进站首页redirect、栏目/搜索push挑票列表/栏目v-for+key、Axios/mock、:class切视图看详情详情query.id、插值、售罄v-if坐下单选座Map存座、props、单击增删确认订单确认购票人组件、条款、张数校验付钱支付/微信码replace、支付宝跳转或QRCode建议目录对照打开自己的dm，缺文件夹就标“部分”src/api/封装Axioscomponents/标题栏、票卡、地图views/首页、列表、详情、选座…router/store/项目9的Piniaassets/vite.config.js代理public/静态资源和规范清单一起勾•页面不要全堆在App.vue•mock与代理路径一致•组件大驼峰，路由path小写•不要中文文件名•README写清npmrundev矩阵填写示例（摘三行）有文件证据才勾“完成”页面技能点完成度列表v-for、key、Axios、:class大图/列表完成/缺切视图则“部分”选座Map、props、单击增删未做拖曳可标部分，但座位状态要有支付replace+QRCode或跳转只能打开首页则整表作废课堂抽查三问综合课用能说清代替能背出演示的第一步和最后一步？进首页→支付成功或出码。说不出最后一步，脚本不可执行。详情页用了哪些已学技能？路由参数、插值、条件售罄、Axios、可能的Tabs/Modal。联调失败检查顺序？启动→路由→代理/mock/字段→再讲组件通信。教材作业怎么交综合运用Vue3、ES6和已学插件完成页面01素材课堂发放的项目素材与接口文档，用来Mock，不要写死假字段。02范围主路径页面必须可演示；栏目五页技术相同，可复用再换类目。03说明交一页演示说明：路径+每页两个技术点。04诚实未做的标未做。全填完成却走不通，作业退回。本项目小结项目1到9如何拼成一个能交的系统任务1规范与架构