本书采用简洁直观的方式来讲解Vue2的各方面，并融入了关于Git的基础和进阶的知识，让读者在学习前端框架之余，还能学习到主流的团队代码管理工具和版本控制工具Git的知识应用。
本书共11章，分为基础篇和进阶篇和项目实战篇。基础篇（第1~3章）详细讲述Vue框架的基础知识点，并以HTML文件的方式切入，浅显易懂，让你的学习体验达到最优。进阶篇（第4~8章）从webpack起步，系统地讲述webpack项目搭建，脚手架来源并切入到基于脚手架的开发模式中。在进阶篇中还讲到Vue.js的高级语法（包括Vuex，Vue路由）的应用及Vue 3.js新增的语法。项目实战篇（第9~11章），分别用Vue2技术实现了通用后台管理系统和大型PC商城的两个实战项目及对Git讲解。本书示例代码丰富，实际性和系统性较强，并配有视频讲解，助力读者透彻理解书中的重点、难点。
本书适合有少量HTML CSS JavaScript基础的初学者入门，并可作为高等院校和培训机构相关专业的教学参考书。
本书是一本基础入门加实战的书籍，既有基础知识，又有丰富示例，包括详细的操作步骤，实操性强。
注重基础：从零开始教授Vue基础语法，帮助读者从原生JS的DOM操作习惯转变为数据驱动视图更新的开发思路，由浅入深帮助读者彻底掌握Vue语法；
注重实战：每两三章配有项目实战，通过实战巩固知识点，更能体现出知识点的实际应用场景，让读者学有所用。
当前的Web开发正处于一个迅速发展和不断演变的时代，在这个过程中，Vue.js作为一款优秀的前端框架，迅速地在业界赢得了广泛的认可和普及，目前国内市场还是以Vue.js?2.0为主导。作为Vue.js的主要版本，Vue.js?2.0不仅继承了Vue.js的核心概念和优势，还带来了更多的改进和增强，为我们构建强大、灵活、高效的Web应用提供了更多的可能。
笔者最早接触的前端框架技术是jQuery技术，随着2013年React的面世，到2014年引入中国，笔者开始接触React项目，成为中国第一批吃螃蟹的人。目前Vue.js?2.0的盛行和Vue.js?3.0的来临，笔者意识到Vue.js?2.0是前端初学者最好入手且是目前国内前端市场应用最广的前端框架，所以本书并没有从Vue.js?3.0开始介绍。笔者认为这个学习过程是逐层递进的，对初学者打好坚实的框架基础非常有帮助。此外，笔者还精心录制了一套前端的学习视频（前端基础到进阶jQuery、Vue.js?2.0、微信小程序、React、Vue.js?3.0、TypeScript等），目前播放量已近八十万人次。
笔者写作本书的目的是想传播前端框架领域知识（因为Vue.js是国人所编写，并且确实优秀），想为Web前端社区做一些贡献的同时也为叩丁狼教育的产品打下坚实的技术基础。写作本书期间，笔者查阅了大量的资料，使知识体系扩大了不少，收获良多。
本书主要内容
第1章介绍Vue.js框架、安装方式及其基础语法结构。
第2章介绍常用及不常用的指令（包括事件绑定指令及属性绑定指令等），以及计算属性。
第3章介绍过滤器、组件化开发及书店购物车项目实战。
第4章介绍Webpack及Vue.js的官方脚手架Vue CLI等。
第5章介绍Vue.js高级语法，如Vue插槽、修饰符、监听、动态组件和缓存及其他高级语法。
第6章介绍DevTools开发工具的使用及Vuex的核心概念等。
第7章介绍Vue?Router及后端数据请求。
第8章介绍Vue.js?3.0新增语法。
第9章介绍Vue.js?2.0全家桶 Element开发后台管理系统项目，该项目可在企业后台管理项目中直接套入使用。
第10章介绍Git基础知识和进阶使用、Git Flow工作流模型，以及拓展了Git高级用法。
第11章介绍大型PC商城项目实战，并提供了用户行为验证、微信扫码登录、购物车、触底加载等常见的解决方案。
阅读建议
本书是一本基础入门加实战的书籍，既有基础知识，又有丰富示例，包括详细的操作步骤，实操性强。
关于学习的方式，建议读者从第1章开始（不建议零基础读者跳看Vue.js?3.0的章节），阅读完每个知识点案例之后，根据书中（或者资料中）给到的代码输入一遍，并理解，这个过程还要结合书中给的代码进行阅读理解，有助于更快速地掌握和理解知识点。
从第4章开始，进入Webpack的学习，这一章可以快速阅读，如遇问题不用在相关问题中纠结太久，反而会影响学习节奏。可以尝试先学习Vue CLI的安装和使用，并往后学 习。因为做项目实战，用的就是Vue CLI，所以直接上手亦可。待后期做完项目后再返回学习并深究Webpack。
第6章和第7章是做项目时会运用到的重点，写到Vuex和Vue?Router，建议结合书中的视频来学习，这样会更加容易理解和上手。
第9章和第11章属于项目实战部分，读者在掌握了前面的基础知识后，可以通过两个实战项目学习企业应用的一些解决方案。在学习过程中遇到Bug不必紧张，程序员开发项目遇到Bug是正常的，通过百度、谷歌甚至ChatGPT翻译一下，即可得到解决方案。
扫描目录上方二维码可下载本书源码。
致谢
感谢单位领导及同事。特别感谢前端团队的老师们，帮助我处理好团队中的其他事务，使我可以全身心地投入写作工作之中。
由于时间仓促，书中难免存在不妥之处，请读者见谅，并提宝贵意见。
庄庆乐
2023年 12月
II
III
庄庆乐，工业和信息化部认证的高级Web前端开发工程师、国内首批React开发者之一、机构Web前端名师。曾担任启法信息科技有限公司前端组主管，独立设计研发门户网站平台；曾担任培训机构前端学科主管，并且录制了一套完整的Web前端课程，以及一套完整的Node.js从基础到后端项目实战课程。主攻前端技术领域，擅长Vue.js、React、Node.js及微信小程序等前端流行框架。
任小龙，互联网知名IT讲师，拥有超过13年的互联网开发和教育培训经历，在Web前端、Java、人工智能等领域都有深入研究，并把研究成果以课程和书籍的方式回馈给学员。现任叩丁狼教育教学总监，带领团队孜孜不倦地研发课程和教学方法，成果显著，已培养超过2万名优秀IT人才，为业界树立了教育领域的标杆。
陈世云，曾代表中国电信广东省公司参与电信集团大客户项目，担任微服务技术架构师，与23省技术团队联合研发100多个项目，最早一批采用微服务、前后端分离技术架构，原生iOS安卓混合开发技术架构设计，交叉团队部署理念设计者，对 IT行业各种岗位及职业规划有深入了解。
第1章 Vue.js基础语法 1
1.1 Vue.js框架简介 1
1.1.1 国内外前端主流框架分析 1
1.1.2 Vue.js框架简介 2
1.1.3 Vue.js开发编辑器 2
1.1.4 Vue.js安装 3
1.2 Vue.js语法结构 4
1.2.1 实例化Vue与Mustache语法 4
1.2.2 双向数据绑定及其原理 6
1.2.3 Vue.js文件中的MVVM 8
第2章 Vue.js指令、事件与计算属性 9
2.1 Vue.js基础指令 9
2.2 事件绑定指令 14
2.3 属性绑定指令 17
2.4 计算属性 21
第3章 过滤器及组件化开发 25
3.1 过滤器与生命周期 25
3.1.1 Filter过滤器 25
3.1.2 LifeCycle生命周期 27
3.2 组件化开发 28
3.2.1 组件化开发的必要性 28
3.2.2 全局组件 28
3.2.3 局部组件 33
3.3 书店购物车项目实战 39
第4章 Webpack、Slot与 Vue CLI脚手架 46
4.1 Webpack模块化打包工具 46
4.1.1 Webpack的简介与安装 46
4.1.2 Webpack基本配置 48
4.1.3 webpack-dev-server 49
4.1.4 html-webpack-plugin 50
4.1.5 loader 51
4.1.6 babel 52
4.1.7 HTML热更新 53
4.1.8 图片资源 54
4.2 Vue CLI 55
4.2.1 Vue CLI的简介与安装 55
4.2.2 Vue CLI创建项目 56
4.2.3 Vue CLI项目预览 58
第5章 Vue.js高级语法 61
5.1 插槽 61
5.1.1 匿名插槽 61
5.1.2 具名插槽 62
5.1.3 作用域插槽 63
5.2 修饰符 64
5.2.1 表单修饰符 64
5.2.2 事件修饰符 65
5.2.3 按键修饰符 66
5.3 监听 66
5.3.1 普通监听 66
5.3.2 立即监听 67
5.3.3 深度监听 68
5.3.4 deep优化 69
5.4 动态组件与组件缓存 70
5.4.1 动态组件 70
5.4.2 KeepAlive缓存组件 71
5.5 Vue.js其他高级用法 72
第6章 Vuex 76
6.1 DevTools 76
6.2 Vuex 79
6.2.1 Vuex简介与安装 79
6.2.2 Vuex核心概念 80
第7章 路由与请求 85
7.1 路由 85
7.1.1 Vue Router简介与安装 85
7.1.2 路由文件配置 86
7.1.3 路由跳转 87
7.1.4 导航守卫 88
7.2 请求 90
第8章 Vue.js 3.0新增语法 93
8.1 Vue.js?3.0起步 93
8.2 Vue.js?3.0新增语法 94
8.2.1 Composition API 94
8.2.2 Provide与Inject 98
8.2.3 Teleport 98
8.2.4 Suspense 99
8.2.5 Fragment 100
8.2.6 TreeShaking 101
8.2.7 Performance提升 102
8.2.8 生命周期 102
第9章 项目一：Vue.js?2.0全家桶 Element开发后台管理系统 103
9.1 创建项目与添加Element模块 103
9.2 项目初始化 104
9.3 登录组件的初步引入及使用 105
9.4 登录组件的初步完善 106
9.4.1 登录页面 106
9.4.2 覆盖Element UI样式的正确写法 108
9.4.3 书写校验规则 108
9.4.4 自定义校验规则 109
9.4.5 校验 109
9.4.6 企业级项目验证 110
9.4.7 验证码图片的获取 111
9.5 封装axios的拦截器 111
9.6 完善登录模块 112
9.7 错误提示及其统一处理方案 115
9.8 登录成功后跳转到首页 117
9.9 经典三栏布局解决方案 118
9.10 书写路由守卫 120
9.11 手写菜单栏 121
9.11.1 折叠菜单按钮的初步规划 121
9.11.2 菜单展开和折叠状态的展示 122
9.11.3 是否折叠导航栏 123
9.11.4 修改Vuex中isNavCollapse的值 124
9.11.5 菜单栏折叠卡顿的问题 125
9.11.6 折叠过渡效果的实现 125
9.11.7 补充Logo和标题 126
9.11.8 定义初始数据导航 126
9.11.9 菜单实现路由跳转 128
9.12 统一处理请求后的code==200的情况 129
9.13 动态生成菜单栏 131
9.13.1 请求获取用户菜单列表 131
9.13.2 分析思路 134
9.13.3 处理menuData数组 135
9.14 修改二级菜单栏的样式补充 137
9.15 图标处理 138
9.16 认证失败处理 139
9.17 配置子路由（内容部分） 139
9.18 动态添加子路由规则 140
9.19 添加路由切换的过渡动画 142
9.20 面包屑处理 143
9.20.1 渲染和样式初步处理 143
9.20.2 title的收集 144
9.20.3 在面包屑组件中展示title 145
9.20.4 解决网址栏跳转但视图不更新的情况 145
9.21 404页面的处理 146
9.22 删除token 147
9.23 用户信息处理 147
9.23.1 登录成功获取用户信息 147
9.23.2 下拉菜单及退出登录 150
9.24 标签栏处理 151
9.24.1 初步布局 151
9.24.2 组织tags数组 152
9.24.3 当前样式的处理 153
9.24.4 跳转处理 155
9.24.5 删除标签 155
9.24.6 右击出现快捷菜单 156
9.24.7 菜单项现实逻辑的控制 156
9.24.8 静动态路由的区分 158
9.24.9 关闭标签栏 159
9.24.10 根据单击的项目对tags进行操作 160
9.25 表格处理 161
9.26 分页处理 164
9.27 导出文件与上传文件的处理 165
9.27.1 导出文件 165
9.27.2 上传文件 166
第10章 Git介绍 169
10.1 Git的基本使用 170
10.2 Git Flow工作流模型 174
10.3 Git拓展 176
第11章 项目二：大型PC商城 182
11.1 项目准备 182
11.2 网站数据请求模块 183
11.3 头部组件 186
11.3.1 版心样式 186
11.3.2 头部组件布局 186
11.4 导航组件 188
11.4.1 基本布局 188
11.4.2 搜索框布局 189
11.4.3 路由配置及导航项当前样式 190
11.5 登录模块布局 192
11.5.1 模态窗口的书写 192
11.5.2 设置单击展示模态窗口 193
11.5.3 单击关闭模态窗口 195
11.5.4 单击标题栏的切换效果 196
11.5.5 表单基本布局 197
11.6 拼图验证滑块 199
11.7 单击获取验证码按钮的逻辑 201
11.7.1 逻辑分析 201
11.7.2 判断手机号格式 201
11.7.3 倒计时及其展示 202
11.7.4 连续单击倒计时Bug 203
11.7.5 抽取工具函数 204
11.7.6 发起获取验证码请求 205
11.7.7 请求成功回调函数的完善 206
11.8 手机号码登录逻辑分析 207
11.8.1 抽取前两个验证的代码 207
11.8.2 发起登录请求 208
11.8.3 登录成功后的逻辑 209
11.8.4 购物车按钮的布局 210
11.8.5 购物车按钮展示（登录状态）分析 211
11.9 提示组件的封装 212
11.9.1 icon图标的使用 212
11.9.2 Toast组件的初步封装与使用 213
11.9.3 Toast组件展示 215
11.9.4 Toast组件的进场离场效果 216
11.9.5 封装Toast的属性 217
11.9.6 Toast组件自动关闭的处理 218
11.9.7 总结：提示框组件的使用 219
11.10 微信扫码登录微信登录二维码的获取与展示 220
11.10.1 获取微信二维码 220
11.10.2 微信二维码样式调整 220
11.11 微信扫码登录用临时票据code换取token 221
11.12 手机验证码登录 223
11.13 路由监听及其应用 223
11.14 组件重载 225
11.15 获取登录用户信息 226
11.16 用户信息渲染 227
11.17 删除token后的用户信息初始化 230
11.18 首页布局的套用 230
11.19 详情页的处理 240
11.20 单击加入购物车 247
11.21 全部商品页面 248
11.21.1 结构样式套用 248
11.21.2 商品列表渲染 250
11.21.3 选项数据的分析和渲染 251
11.21.4 单击选项，切换商品列表 252
11.21.5 搜索框事件 253
11.22 导航守卫 254
11.22.1 全局导航守卫 254
11.22.2 组件内部导航守卫 255
11.23 个人中心购物车页面 255
11.24 404处理 266
11.25 滚动到底部加载更多 266
11.26 跨域配置 269
11.27 项目环境变量配置 270
IV
V
书单推荐
