Vue企业开发实战（第2版）-课程标准

第页《网站开发技术（VUE）》课程标准一、课程概述（一）课程基本信息课程名称网站开发技术（VUE）课程代码05051090适用专业软件技术（510203）授课对象高等职业教育专科学生课程类型专业核心课程考核方式考试课程学分4课程学时64（理论32，实操32）开设学期第3学期授课教材《Vue企业开发实战》先修课程网页设计与制作、Javascript程序设计后续课程网站框架开发（二）课程性质本课程是软件技术专业的专业核心课程，面向Web前端与网站开发岗位。采用“项目导向、任务驱动、理实一体”的组织方式，训练学生用Vue3完成企业级单页应用开发。先修网页设计与制作、Javascript程序设计，为学生提供页面、脚本与HTTP基础；本课程在此之上完成工程化搭建、ES6、路由、核心语法、组件化、服务端通信、状态管理、插件集成、项目综合与AI辅助编程。同学期可与面向对象程序设计（JAVA）相互印证前后端分工；后续为网站框架开发提供可运行的前端工程与联调能力。（三）课程与先修、后续课程关系类型课程名称对本课程的支撑/需要本课程提供的能力先修网页设计与制作提供HTML/CSS、布局和静态页基础，支撑页面骨架还原。先修Javascript程序设计提供语法、DOM、事件和异步基础，支撑ES6与Vue动态页。后续网站框架开发需要本课提供组件化与接口调用能力，便于向小程序等端迁移。（四）课程设计思路课程以产教融合为理念，能力本位、工作过程导向。对应企业前端从“立项搭环境”到“页面实现、通信、组件化、插件与综合交付，再到AI辅助提效”的完整链路。教学实施理实一体、线上线下混合；评价形成性与终结性结合。总学时64，理论32、实操32。二、课程目标（一）课程总目标1.知识与技能目标（1）能完成Vue3+Vite工程搭建，并引入ViewUIPlus、配置vite.config.js。（2）能使用ES6（let/const、解构、箭头函数、Map、Module、Promise）编写可维护的前端代码。（3）能使用VueRouter4配置路由、重定向、懒加载与编程式导航，实现多页面组织。（4）理解MVVM与单文件组件，掌握插值、生命周期及class/style绑定。（5）能配置Vite代理与Mock，使用Axios完成与模拟服务端的数据交互。（6）能使用条件渲染、列表渲染、事件与v-model开发动态网页和表单页。（7）能进行组件拆分与复用，使用props/defineProps、emits/defineEmits与slot完成组件通信和内容分发。（8）能正确使用计算属性与侦听器处理派生数据和侦听逻辑。（9）能在项目中集成Pinia状态管理及百度地图、二维码等常用插件。（10）能按开发规范梳理并综合实现主要页面技能点，完成主路径演示。（11）能使用AI编程辅助工具生成、分析、优化Vue3代码，并对生成结果独立核验。2.过程与方法目标（1）能够经历“业务分析—环境搭建—ES6—路由—Vue核心—服务端通信—指令与表单—组件化—插件与状态—项目综合—AI辅助”的完整前端工作过程。（2）能够依据页面原型和接口约定，用任务分解方式完成各页开发。（3）能够在前后端分离、Mock先行的仿真企业情境中开展项目化学习。（4）能够借助官方文档、浏览器调试工具和AI辅助提高效率，并对结果进行核验。3.情感与态度目标（1）培养遵纪守法、安全生产、操作规范、爱护设备的职业意识。（2）具备爱岗敬业、勤奋学习、精益求精的工匠精神。（3）具备诚实守信的职业操守，规范使用接口、账号、地图密钥与开源组件；对AI生成代码负责。（4）养成团结协作、复用共享和持续学习的习惯。（二）各项目具体目标项目任务知识与技能过程与方法情感与态度1大觅项目架构设计任务1业务场景任务2环境搭建任务3前端架构设计了解业务场景与需求；熟悉Vue3主流技术栈。经历“业务梳理—环境搭建—架构定调”过程。养成规范操作、爱护设备、按需求选型的习惯。2大觅项目中ES6的使用任务1let和const任务2解构赋值任务3箭头函数任务4Map任务5Module语法任务6Promise对象掌握企业级前端常用ES6语法。把ES6语法迁移到Vue3工程代码中。培养严谨的作用域意识和规范编码习惯。3大觅项目的路由配置任务1什么是前端路由任务2VueRouter基本使用任务3页面间导航掌握用VueRouter组织单页应用。按信息架构拆分页面并配置路由表。树立工程化页面组织意识。4初识Vue3任务1Vue.js是什么任务2组件与数据绑定任务3class与style绑定理解Vue3工作原理与基础用法。从“改DOM”转向“改数据驱动视图”。培养声明式思维和阅读官方文档的习惯。5大觅项目中与服务端通信任务1Mock服务配置与使用任务2Mock.js语法任务3snailmock工具任务4Axios安装及配置任务5大觅服务端通信配置掌握分离开发下的数据模拟与HTTP调用。依据接口约定先模拟、再联调。培养接口规范意识和数据安全意识。6模板语法与常用指令任务1条件渲染任务2列表渲染v-for任务3方法与事件任务4v-model与表单掌握Vue3常用指令完成动态网页。把指令组合进真实列表/表单页面。培养对key、条件指令选用的严谨态度。7组件详解任务1组件概念与复用任务2props传递数据任务3组件通信任务4slot分发内容掌握Vue3组件化开发与通信。按页面模块拆分、复用、组合组件。培养复用共享和团队协作意识。8计算属性和侦听器任务1计算属性任务2侦听器掌握派生数据与侦听逻辑的正确用法。把复杂逻辑从模板抽到computed/watch。培养可读性、可维护性优先的编码习惯。9大觅项目中插件的使用任务1百度地图插件任务2状态管理与Pinia任务3二维码插件掌握项目常用第三方插件与状态管理。按业务需要选型并接入插件。遵守密钥与开源组件使用规范。10大觅项目总结任务1大觅项目起步任务2梳理大觅项目技能点形成对Vue3企业项目的整体认识。按页面把分散技能点组装成可演示系统。培养质量意识、规范意识和团队协作。11AI编程辅助与应用实践任务1认识AI编程辅助工具任务2辅助生成Vue3组件任务3分析并优化业务逻辑任务4项目中的综合应用了解AI辅助编程的能力边界。经历“描述需求—生成—核验—改写—提交”闭环。坚持对生成代码独立核验，诚实使用工具。三、课程结构与内容要求本课程总学时64（理论32、实操32）。下表列出各项目知识要求、技能要求、学习性工作任务及学时。项目知识要求技能要求学习性工作任务理论实操合计1大觅项目架构设计了解大觅在线票务业务与购票主路径；熟悉Vue3+Vite技术栈组成；理解分层架构、模块化、前后端分离及SPA/MPA差异；了解Node/NPM/cnpm、VSCode、ViewUIPlus与Vite配置要点。能安装验证Node/NPM；能用Vite创建并启动dm工程；能引入ViewUIPlus；能阅读并修改vite.config.js，配置路径别名@。1.用Vite搭建大觅项目2.引入ViewUIPlus3.分析并改写vite.config.js1122大觅项目中ES6的使用掌握let/const与var的差异；掌握数组/对象解构；理解箭头函数this绑定及不适用场景；熟悉Map、ES6Module、Promise及then/catch、all/race。能用ES6声明变量、解构取值、编写箭头函数；能用export/import组织模块；能用Promise处理异步并衔接组件生命周期加载数据。1.let/const作用域训练2.解构赋值在Vue3中的应用3.Module导入导出4.Promise异步请求示例3363大觅项目的路由配置理解前后端路由原理及hash/history；掌握VueRouter4的安装、路由器模块、重定向、懒加载、<router-link>与路由对象；掌握router.push等编程式导航。能在大觅项目中搭建路由；能配置重定向与懒加载；能实现页面间编程式导航。1.建立路由器模块并启动2.配置重定向与懒加载3.实现页面跳转与导航3364初识Vue3了解Vue3渐进式框架特点与组合式API；理解MVVM与单文件组件；掌握实例与数据、插值表达式、生命周期；掌握v-bind及class/style绑定。能创建SFC；能用插值与数据驱动视图；能正确使用生命周期钩子；能绑定动态class与style。1.单文件组件结构认知2.插值与生命周期实验3.class/style动态绑定3365大觅项目中与服务端通信掌握Vite开发代理；掌握Mock服务与Mock.js语法；了解snailmock；掌握Axios安装、实例与拦截器；理解前后端分离下的接口约定。能配置代理与Mock数据；能用Axios请求模拟接口并在页面展示；能完成大觅项目通信层基本配置。1.配置Vite代理2.编写Mock文件3.Axios请求与错误处理4.大觅接口联调（Mock）3366模板语法与常用指令掌握v-if/v-else/v-show及选用；掌握v-for遍历对象/数组与key；掌握v-on与方法；掌握表单控件与v-model双向绑定。能实现条件展示、动态列表、事件处理与表单双向绑定；能完成列表类页面（如网易健康页训练）。1.条件渲染对比实验2.v-for列表页3.事件处理4.表单双向绑定3367组件详解理解组件复用价值；掌握props/defineProps与单向数据流；掌握自定义事件与defineEmits；掌握slot内容分发。能拆分并复用组件；能完成父子通信；能用插槽定制组件内容（如移动端标题栏）。1.公共组件抽取2.props单向数据流3.子向父事件4.slot插槽应用4488计算属性和侦听器理解computed缓存与适用场景；掌握watch侦听数据变化；能区分计算属性与侦听器。能用计算属性处理展示数据；能用侦听器响应数据变化并执行副作用；能完成购物车等简单功能模块。1.计算属性改写模板表达式2.购物车上机3.侦听器与computed对比3369大觅项目中插件的使用掌握百度地图JSAPI引入与密钥使用；理解全局状态管理场景；掌握Pinia基本用法；掌握二维码插件生成方法。能在Vue3+Vite中集成地图；能用Pinia管理跨组件状态；能在购票/支付等场景生成二维码。1.百度地图基本使用2.Pinia状态管理实践3.二维码生成33610大觅项目总结理解从初始化到页面实现的完整过程；熟悉开发规范与架构要点；能按页面对应第1–9章技能点。能按规范推进大觅主要页面；能梳理并说明各页所用技术；能查漏补缺完成综合演示。1.项目规范与准备回顾2.按页面梳理技能点3.大觅主要流程联调演示33611AI编程辅助与应用实践了解Copilot、Cursor、通义灵码等工具及适用场景；掌握用AI生成组件模板与逻辑的思路；理解必须核验、重构生成结果。能搭建AI辅助环境；能生成并改写Vue3组件；能让AI分析代码并落实优化；能把AI工具纳入大觅开发流程且对结果负责。1.AI工具安装与初体验2.生成Vue3组件并核验3.优化业务逻辑4.在大觅页面中综合应用336合计323264四、学习产出与学业测评（一）项目学习产出评价项目名学习产出（合格标准）建议评价方式1大觅项目架构设计能口述购票主路径；工程可启动；UI框架引入成功。上机检查+口头/书面作业2大觅项目中ES6的使用能独立完成解构、模块化与Promise上机题。上机检查+口头/书面作业3大觅项目的路由配置大觅主要页面可按路由切换，导航正确。上机检查+口头/书面作业4初识Vue3能说明生命周期用途，完成动态样式绑定。上机检查+口头/书面作业5大觅项目中与服务端通信代理生效，Mock数据可被Axios正确展示。上机检查+口头/书面作业6模板语法与常用指令能独立完成含列表、条件、表单的页面。上机检查+口头/书面作业7组件详解能实现带props/emits/slot的可复用组件。上机检查+口头/书面作业8计算属性和侦听器购物车或同类页面中正确使用二者。上机检查+口头/书面作业9大觅项目中插件的使用地图可显示，Pinia状态可共享，二维码可生成。上机检查+口头/书面作业10大觅项目总结能演示购票主路径并说明各页技能点。上机检查+口头/书面作业11AI编程辅助与应用实践提交经核验的组件/优化说明，而非原文粘贴。上机检查+口头/书面作业（二）课程学业成绩认定成绩由形成性评价与终结性评价构成，突出项目过程与上机产出。评价类型评价项目权重说明形成性评价课堂表现与规范操作10%出勤、设备使用、代码规范形成性评价各项目上机与学习产出50%任务完成情况，综合演示权重略高形成性评价作业与技能点口述10%对照简答题与路径说明终结性评价期末考查30%现场演示+代码抽查+简答合计—100%考查课，过程性证据须可追溯五、实施建议（一）教学建议采用项目导向、任务驱动，理论与上机穿插。建议按教材章序推进，每章先明确任务与目标，再演示，再限时上机。鼓励使用Vue官方文档、ViewUIPlus文档和AI辅助，但核心页面须学生独立完成并说明思路。课堂实施提示：Node使用当前LTS；Vite启动地址以终端为准；静态资源目录以Vite工程public为准。（二）教学条件1.实训条件在Web开发实训室实施理实一体教学。工位不少