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

《网站开发技术（VUE）》·教案1

第PAGE页

一、基本信息

课程名称

网站开发技术（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混为一谈。本课不要求写