《Vue.js前端框架基础项目式教程》课程标准

-6-XXXX职业学院《Vue.js前端框架基础》课程标准（2024版本）编制单位：XXX大数据学院执笔人：审核人：审定人：审定日期：2024.6.30XXXX职业学院教学工作部制《Vue前端框架基础》课程标准一、课程标准开发团队序号姓名工作单位职称/职务作用1讲师编写2副教授讲授注：指参与开发课程标准的主要人员，原则上应为2-3人，其中必须有1人来自行业企业。二、课程基本信息课程名称前端框架高级应用课程代码5314028课程学时总学时：64理论：32实践：32课程学分4适用专业移动互联考核性质R考试£考查课程类型£理论课（A类）R理实一体课（B类）£实践课（C类）前导课程《Web前端基础》后续课程无三、课程概述（一）课程的性质本课程是移动互联专业必修的一门前端框架课程，是在学习了《Vue前端框架基础》课程，具备了网页设计相关内容，如HTML、JAVASCRIPT、CSS、网页自适应等上，开设的一门理论+实践课程，其功能是对接专业人才培养目标，面向前端开发工程师工作岗位，对学生职业能力培养和职业素养养成要起主要支撑作用。（二）课程的功能序号对接的岗位职业岗位知识职业岗位能力职业岗位素质1前端开发工程师岗位（1）掌握前端基础编程路由组件开发（2）熟练使用vue.js或node.js前端框架（1）前端基础代码开发（2）架构设计（1）具有一定的前端开发能力（2）具有前端项目代码管理能力2软件测试岗位（1）产品功能、样式、流程测试（2）编写成品文档、测试样例1）产品功能、样式、流程测试（2）编写成品文档、测试样例1）产品功能、样式、流程测试（2）编写成品文档、测试样例四、课程目标（一）总体目标（1）专业能力目标：掌握Vue.js框架的基本特性和基本语法，能够使用vue-cli独立开发、打包和测试项目。（2）素质能力目标：培养学生通过查阅搜索资料方式进行学习，引导学生独立学习。（3）工程能力目标：培养学生项目的基本需求分析和和设计能力，使学生能够独立开发移动Web、PC网站、API接口程序、微信小程序等。理解Vue.js手机开发技术的基本知识和常用的实现方法，涉及网页设计、CSS样式、JavaScript、面向对象程序设计,响应式、前端常用框架等内容,通过本课程的学习,学生能够了解Web前端开发中,使用面向对象编程思想进行代码封装的基本方法与基本思路；使用优秀的前端框架（Vue.js）；并且通过这些框架的学习和使用,培养学生运用新技术，解决Web前端开发的综合能力。（二）具体目标1.知识目标知道前端框架技术的知识体系；了解Vue框架的基本语法；理解Vue框架的理论知识；掌握Vue框架的应用开发技能。2.能力目标通过完成学习网站项目（任务），为用户提供学习资源的浏览、购买、更新、删除和查询等功能，学生运用Vue框架的知识，根据软件工程标准（规范），按前端开发工程师的岗位要求，完成项目前端页面的开发。3.育人目标通过本课程的学习，在思政育人目标上达到：1、理论对实践的指导作用；2、尊重科学、正确处理中久文化、技术的关系；3、能基本表达个人具有正能量的意见、情感、观点等，能基本陈述事实、理由和描述事件；4、培养创新意识；5、不断积累经验，需要潜心研究，以此培养敬业精神。五、课程教学内容（一）课程设计思路通过完成各个项目任务，学生运用Vue框架的知识，根据软件工程标准（规范），按前端开发工程师的岗位要求，完成项目前端页面的开发。（二）课程内容确定的依据面向的岗位要求：针对前端开发工程师的岗位进行培养、面向的职业资格证书：工信部1+x考证、面向web前端技能竞赛项目等。课程主要教学内容项目（模块、情境）任务（单元）教学内容课时项目一Vue实现单网页任务1.1输出Helloworld1.介绍Vue.js；使用Vue.js的优势；2.Vue安装3.HbuilderX软件的安装4.Vue的引入4项目二实现简易购物车功能任务2.1实现简易数字易计数器1.DOM基础知识2.Vue的模板语法之插值表达式3.Vue的模板语法之指令语法14.计数器实现最大值和最小值8任务2.2实现简易购物车1.Vue的模板语法之指令语法22.实现简易购物车3.监听属性4.计算属性项目三Vue实现音乐的播放任务3.1使用脚手架等创建项目1.Node.js的下载及安装2.Vue的脚手架vue-cli创建项目3.使用Vite进行创建4.使用vueinit创建Vue项目8任务3.2Vue播放音乐1.Vue项目结构2.实现Vue播放音乐3.使用Howler.js库实现音乐的播放项目四Vue组件化开发企业官网的登录和注册页任务4.1用户登录功能的实现1.Vue组件和Vue组件的创建2.父组件向子组件传递数据3．Vue子组件向Vue父组件传递数据4.表单元素5.用户登录功能实现6.第三方组件库element-plus的使用7.使用element-ui实现登录功能16任务4.2使用API接口实现用户的登录1.JDK的安装及环境的配置2.MySQL数据库的安装3.创建数据库及SpringBoot工程4.开发用户登录接口5.Axios的使用6.提供的API接口对应的服务器JAR包的使用7.使用登录接口实现用户登录任务4.3用户注册功能的实现1.Vue的路由的安装和配置2.vue-router的基本使用3.history路由和Hash路由4.注册功能的实现项目五Vue组件化开发企业官网任务5.1网站图片轮播模块1.Swiper轮播组件的安装和基本使用2.将Swiper封装为组件3.Swiper组件中添加超链接16任务5.2网站首页功能实现1.BootStrap的基本使用2.栅格系统3.创建数据库4.添加测试数据5.创建相关API接口6.响应式网页的实现任务5.3网站新闻列表页和新闻详情页模块功能实现1.Vue3选项式API2.Vue3组合式API3.setup的使用4.响应式数据之ref5.响应式数据之reactive6.后端开发对应API接口7.列表页功能实现8.新闻详情页功能实现9.toRefs与toRef任务5.4网站搜索功能的实现1.Vuex的基本概念及安装2.Vuex的基本使用3.模糊搜索的API接口开发4.网站搜索功能的实现项目六实现网站简易后台系统任务6.1后台登录功能优化1.路由的嵌套2.路由的嵌套举例3.路由守卫4.Redis数据库的安装和使用5.后台登录功能实现6.后台登录逻辑优化8任务6.2文章添加功能实现1.百度编辑器Ueditor的基本使用之后端配置2.百度编辑器Ueditor的基本使用之前端配置3.文章添加功能实现4.后端读取栏目信息的API5.前端数据的处理项目七网站应用发布及部署任务7.1系统单元测试及打包1.SpringBoot单元测试概述2.Springboot项目打包4任务7.2Vue应用打包及部署1.将Vue项目打包2.Vue打包后的文件部署注：教学内容要支撑教学目标（能力、知识和育人）。六、课程学业考核和评定（一）考核方式课程考核应体现过程性考核和终结性考核相结合；体现考核方式多样化；体现考核主体多元化；体现突出职业能力考核；探索增值性评价。考试课程的考核比例项目（综合）实训考核标准评价方法评价类型权重评价方式总比例学生出勤基本职业态度10%平时考勤10%过程性考核项目1：vue学习环境搭建10%50%项目2：vue事件处理20%项目3：基本指令练习20%终结性评价Blog系统实现40%项目实训40%注：终结性能力考核与终结性笔试可以二合一，也可选择其一。（二）考核内容1.过程性考核评价项目（综合）实训考核标准考核点考核比例评价标准ABCD职业精神实训出勤率、学习态度、敬业精神、团队协作精神、安全规定执行等方面的情况。

30%

26～30

21～25

18～20

≤17能力目标课程标准规定的能力指标。60%52～6042～5136～41≤35表达沟通项目情况陈述清楚；回答问题正确；实训报告书规范、合理等。

10%

9～10

6～8

4～5

≤3创新表现有独立分析、解决问题的能力；合理化建议被采纳；实训成果有创新等。

加分

10

5

合计

综合评价优秀86～100分；良好70～85分；合格60～69分；不合格＜60分。注：过程性考核要与课程目标一致。2.终结性考核评价序号评价类型评价内容知识点能力点育人点1项目1：Blog系统实现安装NVM，并设置国内访问镜像项目环境搭建培养项目管理能力2项目1：Blog系统实现安装Node和npm项目环境搭建培养项目管理能力3项目1：Blog系统实现安装cnpm项目环境搭建培养项目管理能力4项目1：Blog系统实现安装webpack项目环境搭建培养项目管理能力5项目1：Blog系统实现安装vue,vue-cli项目环境搭建培养项目管理能力6项目1：Blog系统实现新建项目ue-blog项目环境搭建培养项目管理能力7项目1：Blog系统实现安装vue-resource项目环境搭建培养项目管理能力8项目1：Blog系统实现实现博客列表BlogList.vue页面Vue组件开发前端开发代码编写9项目1：Blog系统实现实现博客详情Blog.vue页面使用vue开发业务功能前端开发代码编写10项目1：Blog系统实现实现组件Logo.vue页面,并在BlogList.vue、Blog.vue页面中引用使用vue开发业务功能前端开发代码编写注：终结性评价为综合性评价学业，要体现整门课程的正态分布。七、课程实施保障（一）实训条件1.校内实训室实训室名称面积要求（m2）序号核心设备（软件）数量要求作用备注1Vue1软件开发23本实训室功能描述：2.校外实践教学基地序号校外实习基地名称合作企业名称用途合作深度要求1重庆大永讯飞智能科技有限公司重庆大永讯飞智能科技有限公司企业挂职、学生实习假期校内教师赴企业顶岗实习23（二）师资条件从事本课程的教师应具备以下相关知识、能力和资质。（三）教学资源