《Vue企业开发实战》电子教案1-大觅项目架构设计

《网站开发技术（VUE）》·教案1第页一、基本信息课程名称网站开发技术（VUE）授课教材《Vue企业开发实战》授课项目项目1大觅项目架构设计授课教师XXX授课对象高等职业教育专科软件技术专业授课方式讲授+演示+上机课时2课时（1次课，理实一体）授课地点Web开发实训室二、教学内容本课对应课程标准项目1。以在线票务网站“大觅网”为贯穿项目，一次课完成三件事：看懂业务、搭起工程、定下架构。三个学习任务一次实施，理实一体，不拆分课时。任务教学内容课件任务1业务场景项目定位；首页、详情页、选座页认知；五大功能模块；购票主路径；Vue3+Vite技术栈选型封面至技术栈任务2环境搭建Node.js、NPM/cnpm；Vite与SPA/MPA；创建dm项目；安装依赖并启动环境搭建至上机练习1任务3前端架构设计分层与模块化；前后端分离；VSCode；ViewUIPlus引入；vite.config.js与路径别名@架构设计至本章小结三、学情分析学生已学网页设计与制作、Javascript程序设计，能写静态页和基本脚本，但对工程化前端缺少完整印象：多数人未使用过Node包管理，分不清Vite脚手架、单页应用和UI框架的关系，也容易把VisualStudio与VSCode混为一谈。本课不要求写出业务代码，要求能说清大觅项目在做什么、能独立把工程跑起来、能解释为什么要分层、分离和引入UI框架。四、教学目标（一）知识目标1.了解大觅项目的业务场景与需求分析，能说出五大功能模块和一条购票主路径。2.熟悉Vue3主流技术栈的组成（Node、NPM/cnpm、Vite、ViewUIPlus、vue-router、状态管理、Axios、Mock）。3.理解SPA与MPA的差异，以及分层架构、模块化、前后端分离的基本含义。4.知道ViewUIPlus全量引入与按需引入的适用场景，以及vite.config.js中插件、别名的作用。（二）能力目标1.能安装并验证Node.js/NPM，必要时配置cnpm。2.能用Vite创建Vue3项目、安装依赖并启动，对照欢迎页判断环境是否成功。3.能按建议完成脚手架交互选项，并在项目中引入ViewUIPlus，替换为Success按钮。4.能阅读并修改vite.config.js，为src配置路径别名@。（三）素质目标1.养成规范操作、爱护实训设备、按步骤验证环境的习惯。2.建立“按项目需求选型、不盲目追新”的工程意识。3.在分组排错中培养沟通协作和精益求精的态度。五、教学重点与难点类型内容突破办法重点大觅购票主路径与五大功能模块用首页、详情、选座截图和业务导图，让学生口述一条完整路径重点用Vite创建、安装、启动Vue3项目教师先完整演示一遍，再组织上机，按终端提示排错重点ViewUIPlus引入方式与vite.config.js别名对照main.js与配置文件逐行讲，上机立即验证难点SPA局部刷新与MPA整页刷新结合表1-1，用“点菜单不闪白屏”的生活例子难点分层、模块化、三种分离方式先讲原始开发六个痛点，再对照大觅“分离开发+分离部署”六、教学方法与准备方法：任务驱动、案例演示、理实一体、个别辅导。导入用大觅三张核心页面，新授按“场景→工具→架构”推进，上机对应“能启动、能引入UI、能改配置”。教师准备：课件；已验证可运行的Node环境；教材；上机任务清单。学生准备：实训机可访问外网或内网镜像；VSCode；笔记本记录命令。七、教学过程环节教师活动学生活动设计意图组织教学与导入清点人数，检查投影与实训机。由Angular、React、Vue引出Vue3更易上手。展示大觅首页、详情页、选座页，提问：这是什么类型的网站？说明本课一次走通“业务—工程—架构”，不是一次把整站做完。就座，观察页面，回答“在线票务/选座订票”。用真实票务页面创设情境，从已知框架过渡到Vue3，建立本课“业务—工程—架构”的学习预期。明确学习目标出示五条学习目标，强调本课目标是“初步掌握Vue3项目开发的完整思路”。对照目标勾画，明确本节要达成什么。先亮出可检测的目标，让学生带着任务听课，避免把本课误解为一次做完整站。任务1业务场景对照业务导图拆五大模块：登录注册、栏目浏览、列表详情、选座支付、个人中心。以首页为入口走通主路径：导航→列表→详情→选时间票价数量→选座→确认→支付，强调已登录才能下单。列出技术栈：Node、NPM/cnpm、Vite、ViewUIPlus、vue-router、状态管理、ES6、Axios、Mock。强调四化思想相通，按项目需要选型，核心定为Vue3+Vite。在导图上标注模块；同桌口述一条购票路径；速记技术栈并回答“为什么要Mock”。先业务后技术，建立项目全局图景，为后续选型和编码提供需求依据；用口述主路径检验是否看懂。任务2环境搭建讲Node是JavaScript运行环境，课上使用当前LTS，用node-v验证。讲NPM常用命令及全局与局部区别，必要时安装cnpm。对照表1-1讲SPA/MPA，点明大觅按单页应用搭建。完整演示：npmcreatevite@latestdm→交互选项→cddm→npmi→npmrundev，强调看终端给出的本地地址。本机执行node-v、npm-v；看清脚手架选项；记下创建、安装、启动五步。把运行环境、包管理和脚手架落到可验证的命令，说明为何选用Vite和SPA，扫清后续开发的环境障碍。上机练习1组织学生创建并启动dm项目。巡视排错：未进入目录、未安装依赖、端口被占用、镜像超时。成功标准：浏览器出现Vue欢迎页，存在node_modules。独立完成创建与启动，保存项目路径，关机前不要删除dm。做中学，当堂暴露安装与启动问题，形成“工程能跑起来”的成功体验。任务3前端架构设计用六个痛点说明为何不能用原始方式硬写。讲类MVVM分层和ES6模块化；对比不分离、部分分离、完全分离，明确大觅采用分离开发+分离部署。区分VSCode与VisualStudio。介绍ViewUIPlus，演示npm安装与main.js全量引入，对比按需引入。打开vite.config.js，讲defineConfig、vue()插件和路径别名@。对照静态页举例痛点；判断三种分离方式的维护成本；打开扩展面板和本机配置文件对照。用痛点驱动理解分层、模块化和前后端分离，避免只记步骤不理解为什么这样搭。上机练习2、3要求全量引入ViewUIPlus，在HelloWorld.vue中用Success按钮替换原内容；在vite.config.js中配置@指向src，并在组件中试引用。巡视import路径、CSS是否引入、是否需安装path、是否重启开发服务。改文件、保存，验证热更新出现绿色Success按钮，确认@别名能解析。把架构选择立刻落到代码，验证UI框架引入和路径别名，达成“能引入、能改配置”。小结与作业串线：看懂业务→搭起工程→定下架构。抽问主路径、核心框架与构建工具。布置书面作业，预告下次课进入ES6。整理笔记，记录作业，确认dm工程已保存。把三个任务收成一条线，用抽问和作业巩固要点，衔接下次ES6学习。课堂检测：①大觅属于哪类业务，购票主路径有哪几步？②本项目核心框架和构建工具分别是什么？③工程是否启动成功，Success按钮和@别名是否生效？八、上机任务与评价练习任务要求合格标准常见问题上机1用Vite创建dm项目，安装依赖并启动浏览器出现Vue欢迎页；存在node_modules忘了cd、没执行npmi、端口冲突、镜像超时上机2全量引入ViewUIPlus，HelloWorld.vue换成Success按钮页面出现绿色Success按钮，控制台无报错未引入CSS、未app.use、改错文件上机3vite.config.js配置@指向src，并在组件中试引用用@/components/...能解析，不报找不到模块未安装path、未重启dev、别名写错过程评价建议：出勤与操作规范20%；上机完成情况50%；课堂口述路径/技术栈10%；作业与技能点口述20%。本项目以形成性评价为主，不单独安排纸笔测验。九、作业1.简述大觅项目的需求。2.简述大觅项目的业务逻辑。3.如何安装和调试Node.js？如何使用Vite搭建项目？4.如何在项目中使用ViewUIPlus框架？5.如何在项目中安装、配置构建工具Vite？书面作业：简述大觅项目的需求及业务场景；简述架构设计包含的内容。（下次课抽查3–5人）十、教学反思1.环境安装成功率：________%；主要卡点：______________________________2.学生对SPA、分层、分离方式的理解是否到位：__________________