Vue.js全家桶零基础入门到进阶项目实战

零基础轻松学透Vue，助你成为前端大神

本书的宗旨是：帮助读者全面掌握Vue.js全家桶技术、掌握单页面前后端分离项目开发，并知其所以然，理解MVVM框架思想；让不会前端的后端开发人员，快速精通Vue.js全家桶技术。
本书贯穿讲解Npm、VSCode、Vue核心基础、中级进阶、综合进阶、项目上线部署等全过程，循序渐进、环环相扣、通俗易懂讲解，分析为什么这样使用，让你知其所以然。主要技术包括：NPM/CNPM、VSCode、Vue.js、MVVM、Axios、Vue Router、Webpack、ES6、Vue Loader、Vue CLI、Element UI、Vuex、Mock.js、EasyMock、Echarts 、Promise、拦截器、组件通信、跨域问题、上线部署等。
本书适合前端开发人员、后端开发人员阅读，包括：在校生，需要掌握流行的新技术，做到与职场同步；在职人员，需要系统全面高效使用Vue技术。

徐照兴，教授，主要研究领域为Web数据库应用程序开发、计算机应用技术教学，现任江西服装学院大数据学院院长、物联网工程专业带头人，南昌县科协五届常委、江西省5G产业联合会专家委员会首席专家、江西省职业技能鉴定考评员、江西省高等教育教学与教学管理专家库成员、江西省专业技术资格评委会评委库成员。同时为51CTO学院特级讲师、CSDN学院、腾讯课堂、网易云课堂、淘宝教育等在线教育平台讲师等，至今网上各类学员超80万，受到学员的高度好评。刘建华

第1篇　入门准备实操篇
　NPM包的安装及使用 2
1.1 　NPM概述 3
1.2 　NPM安装 3
1.3 　配置Node.js环境（NPM全局安装路径） 5
1.4 　通过NPM初始化项目 6
1.5 　安装模块（JS库） 8
1.6 　生产环境和开发环境依赖模块的安装 13
1.7 　CNPM命令的安装 15
1.8 　批量下载模块 16
1.9 　其他常用NPM命令 17
实战练习 19
高手点拨 20

　VS Code开发工具的安装及配置 21
2.1 　VS Code开发工具的特点与安装 22
2.2 　常用插件安装 23
2.3 　VS Code常用设置 27
2.4 　设置新建文件类型 28
2.5 　常用的快速编辑技巧 30
2.6 　解决VS Code卡顿 32
实战练习 32
高手点拨 32
第2篇　基础核心案例篇
　Vue核心概念及第一个Vue程序精讲 34
3.1 　Vue.js的基本认识 35
3.2 　Vue.js的优点与核心思想 35
3.3 　Vue与React、Angular比较 36
3.4 　MVVM框架概述 37
3.5 　引入Vue 38
3.6 　第一个Vue程序 39
实战练习 43
高手点拨 43
　Vue常用指令使用 44
4.1 　v-text与v-html指令 45
4.2 　v-model指令 47
4.3 　v-cloak指令 50
4.4 　v-bind指令 51
4.5 　v-on指令 55
4.6 　v-if指令 57
4.7 　v-show指令 59
4.8 　v-for指令 61
实战练习 69
高手点拨 71

　事件修饰符、按键修饰符与系统修饰符 72
5.1 　DOM 事件流相关概念 73
5.2 　事件修饰符 74
5.3 　按键修饰符 79
5.4 　系统修饰符 83
实战练习 85
高手点拨 87

第3篇　中级进阶实战篇
　Vue实例常用的属性和方法 117
7.1 　Vue实例常用属性 118
7.2 　Vue实例常用方法 121
实战练习 128
高手点拨 129

　自定义指令及过渡（动画） 130
8.1 　自定义指令 131
8.2 　过渡效果实现 135
8.3 　钩子函数与动画呈现 139
8.4 　动画效果的实现 141
8.5 　结合第三方动画库Animate.css一起使用 142
实战练习 146
高手点拨 147

　自定义过滤器及开发插件 148
9.1 　自定义过滤器 149
9.2 　开发插件 153
实战练习 156
高手点拨 157

　组件及组件间的通信 158
10.1 　组件的概念 159
10.6 　父子组件的定义及使用 175
10.7 　子组件访问父组件中的数据 177
10.8 　父组件访问子组件中的数据 181
实战练习 205
高手点拨 205


　使用Vue Router实现路由控制实战 222
12.1 　前端路由及实现前端路由的基本原理 223
12.2 　Vue Router的应用 224
12.3 　前端路由嵌套 230
12.5 　实现路由导航跳转的方式 237
12.6 　命名路由和命名视图 242
12.7 　组件与路由间的解耦 246
实战练习 250
高手点拨 251

　webpack资源打包工具实战 252
13.1 　前端模块化开发 253
13.2 　webpack的基本认识 253
13.3 　webpack的安装 254
13.4 　webpack快速入门实操 256
实战练习 261
高手点拨 261

　使用Vue Loader打包单文件组件实战 286
16.2 　webpack结合Vue Loader打包单文件组件实战 291
16.3 　持续改进—采用render函数渲染组件 295
16.4 　完善改进—丰富Vue单文件组件 296
实战练习 305
高手点拨 305

　运用Vue CLI 脚手架构建项目实战 306
17.1 　Vue CLI的概念及其安装 307
17.2 　利用Vue CLI搭建Vue单页面项目 308
17.3 　Vue CLI服务命令的使用 314
17.4 　Vue CLI脚手架创建的项目基本结构归纳解析 316
17.5 　通过vue.config.js自定义配置选项 317
实战练习 325
高手点拨 325

　Element UI应用精讲 326
18.2 　Layout布局 330
18.3 　Container 布局容器和Color色彩 332
18.4 　Typography 字体和Border 边框 335
18.5 　Icon 图标和Button按钮 337
18.6 　Radio 单选按钮和Checkbox 复选框 341
18.7 　Input 输入框和InputNumber 计数器 344
实战练习 366
高手点拨 367

第4篇　综合进阶项目篇
　图书信息管理系统基础框架搭建实战 418
21.2 　项目脚手架搭建、更改标题、图标及初始化配置 420
21.3 　安装并配置Element UI 421
21.4 　封装Axios对象 422
21.5 　使用封装后的Axios对象发送请求返回数据到前端 426
21.6 　开发环境通过代理解决跨域请求 430
实战练习 434
高手点拨 434

　图书信息管理系统登录模块实现 435
22.1 　系统登录页面设计 436
22.2 　使用Element完善系统登录页面设计 437
22.3 　使用Easy Mock为登录验证创建模拟接口 441
22.4 　登录业务逻辑实现 443
实战练习 446
高手点拨 446

　图书信息管理系统主页功能初步实现 447
23.1 　主页布局设置 448
23.2 　利用Element设计头部组件 451
23.3 　利用Element设计左侧导航组件 453
23.4 　为左侧导航配置路由 456
23.5 　利用Element UI实现主区域显示当前路径 460
23.6 　退出系统功能实现 464
23.7 　路由权限校验 468
实战练习 472
高手点拨 472

　图书信息管理系统增删改查实现 473
24.1 　使用Easy Mock添加图书信息列表服务接口 474
24.2 　创建调用图书信息列表服务接口获取数据的API 475
24.3 　利用Element UI展示图书信息列表数据 477
24.4 　利用过滤器转换图书类型并重新渲染 479
24.5 　查询图书信息 .481
24.6 　添加图书信息 495
24.7 　图书信息的编辑功能实现 505
实战练习 522
高手点拨 522

　修改密码功能及完善系统 523
25.1 　修改密码、创建模拟接口及封装发送异步请求方法 524
25.2 　实现修改密码组件及重置功能 525
25.3 　利用Element自定义校验规则校验密码及确认密码 529
25.4 　修改密码业务逻辑的实现 533
25.5 　全局设置数据加载Loading显示效果 536
25.6 　全局处理Axios请求响应异常 540
实战练习 541
高手点拨 542

　利用ECharts+Vue生成动态图表的技术 543
26.1 　根据图书类别、库存数量初步生成折线图 544
26.2 　请求后端数据动态生成图表 546
实战练习 552
高手点拨 552

　使用Vuex重构图书信息管理系统 553
27.2 　创建并初步编写登录Vuex状态管理器 555
27.3 　使用Vuex完善登录的实现 558
27.4 　使用Vuex重构项目解决页面刷新回到登录页面问题 561
27.5 　使用Vuex状态管理登录用户信息 564
实战练习 570
高手点拨 570

　项目上线部署及生产环境跨域问题解决 571
28.1 　项目打包、准备好服务器及选择Web服务器 572
28.2 　上传文件到服务器和查看服务器安装的工具 574
28.4 　配置 nginx.conf 和上传打包后的项目 580
实战练习 584
高手点拨 584

Vue、React、Angular是当今前端界的“三驾马车”，通过从GitHub上搜索星级指数或从招聘网站上搜索前端工程师对技术的要求可知，Vue在国内非常流行，不仅前端设计人员必须掌握，而且后端程序员也必须掌握。

目前市场上关于Vue的书并不少，但很多存在以下问题：第一，版本旧，基本是基于Vue 2.6以下版本；第二，没有真正针对零基础读者进行讲解；第三，讲解晦涩，很多文字来自官方文本；第四，注重理论分析，忽略实操的讲解；第五，内容不全面、不深入。本书的编写正好可以弥补这些方面的不足。

本书以读者的视角，从工程实用角度出发，针对目前Vue及其周边生态最新版技术，通过实例精讲的形式，由易到难、由浅入深、由小实例到综合项目一步步讲解实操及分析。全书共分4篇28章，主要内容如下。

第1篇为入门准备实操篇，精讲NPM包的安装及使用、Visual Studio Code开发工具的安装及配置，为Vue的学习做好必要的准备，为后续更好地学习奠定基础。

第2篇为基础核心案例篇，主要讲解Vue.js基础核心内容，包括Vue.js的核心思想、MVVM框架、常用指令、事件修饰符、按键修饰符、系统修饰符、计算属性、监听器、Vue实例生命周期等。掌握好这些内容就能初步使用Vue进行开发，同时也为进一步深入学习Vue奠定坚实基础。

第3篇为中级进阶实战篇，主要讲解Vue实例常用属性和方法、自定义指令、自定义过滤器、过渡、开发插件、组件及组件间的通信、使用Axios发送HTTP请求、使用Vue Router实现路由控制，使用webpack打包工具的方法、ECMAScript 6的语法、webpack与各种插件的配合使用、Vue CLI脚手架的搭建、Element UI的应用、Vuex的应用、Mock和Easy Mock的应用。掌握好上述内容，可助力读者全面理解Vue及其周边生态技术，并能够应用到项目中。

第4篇为综合进阶项目篇，主要以开发图书信息管理系统为例，讲解单页面前端与后端分离项目的开发，主要用到的技术包括Vue.js、Vue CLI、webpack、Vue Router、Axios、Vuex、Element、Easy Mock、ECharts。综合运用Vue及周边生态技术进行单页面前端与后端分离项目开发，全面巩固加深对Vue.js的理解，最后实现上线部署。

本书的优势和特色如下：

1.技术全面、完整、系统—对标企业项目技术栈

从Vue入门准备需要的知识到单页面前后端分离的综合进阶项目讲解，并上线于阿里云服务器，全面完整地讲解Vue全家桶技术，即包含周边生态技术，而且所讲技术版本均为当前最新。

2.讲解详细、通俗易懂——分析循序渐进且逻辑强

本书主要以案例形式讲解，撰写细致、条理清晰、通俗易懂，重在分析为什么，让读者知其所以然，没有晦涩的专业词汇，对实操部分均给出详细清晰的步骤。

3.有学习讨论交流群——快速成为前端工程师

对购买本书的读者，可以扫描作者的微信二维码加为好友，由作者拉入专门的学习讨论交流微信群。在学习过程中遇到任何问题都可以在微信群中讨论交流。

本书配套资源有源代码、需要用到的工具软件等，已上传至百度网盘，供读者下载。读者可关注封底“博雅读书社”微信公众号，找到“资源下载”栏目，根据提示获取。

由于时间仓促，加之作者水平有限，书中难免存在一些不足之处，欢迎广大读者批评和指正。