JavaScript+Vue.js Web开发项目教程

定　　价：59.8 元

丛书名：工业和信息化精品系列教材

• 作者：夏道春 姜华 李爱菊
• 出版时间：2025/8/1
• ISBN：9787115672094
• 出 版 社：人民邮电出版社

• 中图法分类：TP393.092.2 
• 纸张：胶版纸
• 开本：16开

内容简介

随着Web前端技术的发展，JavaScript应用越来越广泛，各种框架技术（如Vue.js）更新速度快，应用广泛。本书从JavaScript、Node.js的基础知识逐步展开，进而深入探讨Vue.js，包括Vue基础、组件开发、过渡与动画、Vite、Vue Router、Pinia以及Element Plus的应用。全书共分为5个项目，每个项目均遵循项目驱动的教学模式，通过实际项目中的案例来深入解析所涉及的知识点，确保理论与实践紧密结合。

本书适合作为普通高校、职业高等学校相关专业网页设计与制作课程的教材，也可作为网页设计行业从业人员的参考读物。

编辑推荐

1.产教融合新形态教材，校企合作开发

2.项目-任务式为主线，大项目贯穿

3.从WEB前端开发岗位的技能要求出发，以企业真实项目案例为主导，融合WEB前后端技术，使读者能够快速进入到WEB开发领域，全面熟悉WEB项目开发流程，打通技术壁垒

4.知识点讲解根据项目完成的进度，拆分到每个任务里面去

5.结合党的二十大精神，将思政元素融于教材中

6.将企业的新技术、新标准、新工艺融入教材中

作者介绍

夏道春，副教授，信息系统项目管理师,山东科技职业学院信息工程系教师，山东省软件技术专业省级教学团队骨干教师。一直从事高职软件技术类专业课教学，讲授课程包括JavaScript程序设计、Vue.js程序设计、Java程序设计等。 主编简介：姜华，女，硕士学位，副教授，Web前端开发国家级教师教学创新团队核心骨干成员。职业教育省级在线精品课程主持人，2门省级精品课程主讲教师，省级软件技术专业资源库子项目负责人，主持参与完成市厅级以上课题20余项，其中国家教学成果二等奖1项、省级教学成果特等奖1项、省级教学成果二等奖1项。一直从事高职软件类专业课教学，讲授课程包括：HTML5+CSS3响应式Web开发、JavaScript程序设计、动态网站开发、MySQL数据库应用等。

目 录

目 录

项目1

搭建智慧公寓网站首页1

项目目标1

效果展示2

任务1.1　搭建JavaScript开发环境与渲染

首页信息2

【任务概述】2

【知识储备】3

1.1.1　初识JavaScript3

1.1.2　JavaScript开发工具4

1.1.3　JavaScript代码的3种引入方式7

1.1.4　JavaScript常用的输入与输出语句9

【任务实施】11

任务1.2　使用JavaScript基础语法实现

动态显示时间13

【任务概述】13

【知识储备】13

1.2.1　变量和常量13

1.2.2　数据类型15

1.2.3　表达式与运算符17

1.2.4　函数21

1.2.5　BOM25

【任务实施】27

任务1.3　使用流程控制与数组实现自动

轮播Banner图28

【任务概述】28

【知识储备】28

1.3.1　流程控制28

1.3.2　数组34

【任务实施】36

任务1.4　使用DOM与事件实现二级菜单的

显示与隐藏37

【任务概述】37



【知识储备】38

1.4.1　DOM38

1.4.2　事件基础44

【任务实施】48

项目实现51

项目小结54

课后习题54



项目2

智慧公寓管理系统的服务器端数据

处理56

项目目标56

效果展示57

任务2.1　搭建Node.js开发环境并实现

模块化开发57

【任务概述】57

【知识储备】58

2.1.1　初识Node.js58

2.1.2　Node.js环境搭建60

2.1.3　模块化开发64

【任务实施】71

任务2.2　构建与测试Node.js的网络

开发73

【任务概述】73

【知识储备】73

2.2.1　Postman工具73

2.2.2　AJAX与Axios75

2.2.3　Express框架80

【任务实施】87

项目实现90

项目小结94

课后习题94



项目3

智慧公寓管理系统的登录与注册

页面96

项目目标96

效果展示97

任务3.1　构建Vue开发环境97

【任务概述】97

【知识储备】98

3.1.1　初识Vue98

3.1.2　Vue环境搭建100

【任务实施】101

任务3.2　基于Vue基础语法实现表单提交

页面102

【任务概述】102

【知识储备】103

3.2.1　模板语法103

3.2.2　指令105

3.2.3　Vue实例核心选项113

3.2.4　模板引用122

3.2.5　Class与Style绑定123

3.2.6　事件处理与表单绑定125

【任务实施】130

任务3.3　基于组件实现列表渲染页面132

【任务概述】132

【知识储备】133

3.3.1　组件基础133

3.3.2　过渡与动画139

【任务实施】145

项目实现147

项目小结149

课后习题149



项目4

智慧公寓管理系统的前端技术栈151

项目目标151

效果展示152

任务4.1　构建现代化构建工具Vite开发

环境152





【任务概述】152

【知识储备】153

4.1.1　单文件组件与构建工具153

4.1.2　Vite简介154

4.1.3　Vite的安装与使用155

4.1.4　Vite的插件机制157

【任务实施】158

任务4.2　启用Element Plus组件库增强

项目效果160

【任务概述】160

【知识储备】161

4.2.1　初识Element Plus组件库161

4.2.2　Element Plus常用组件163

【任务实施】188

任务4.3　集成Vue Router与Pinia，构建

动态应用190

【任务概述】190

【知识储备】190

4.3.1　Vue Router190

4.3.2　Pinia状态管理199

【任务实施】205

项目实现208

项目小结211

课后习题211



项目5

智慧公寓管理系统的设计与实现213

项目组织架构213

项目环境214

任务5.1　实现服务器模块215

【任务概述】215

【任务实施】215

任务5.2　实现前台页面模块216

【任务概述】216

【任务实施】218

任务5.3　实现后台页面模块225

【任务概述】225

【任务实施】228

项目总结238