Vue.js全家桶零基礎(chǔ)入門(mén)到進(jìn)階項(xiàng)目實(shí)戰(zhàn)

第1篇　入門(mén)準(zhǔn)備實(shí)操篇
　NPM包的安裝及使用 2
1.1 　NPM概述 3
1.2 　NPM安裝 3
1.3 　配置Node.js環(huán)境（NPM全局安裝路徑） 5
1.4 　通過(guò)NPM初始化項(xiàng)目 6
1.5 　安裝模塊（JS庫(kù)） 8
1.6 　生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境依賴(lài)模塊的安裝 13
1.7 　CNPM命令的安裝 15
1.8 　批量下載模塊 16
1.9 　其他常用NPM命令 17
實(shí)戰(zhàn)練習(xí) 19
高手點(diǎn)撥 20

　VS Code開(kāi)發(fā)工具的安裝及配置 21
2.1 　VS Code開(kāi)發(fā)工具的特點(diǎn)與安裝 22
2.2 　常用插件安裝 23
2.3 　VS Code常用設(shè)置 27
2.4 　設(shè)置新建文件類(lèi)型 28
2.5 　常用的快速編輯技巧 30
2.6 　解決VS Code卡頓 32
實(shí)戰(zhàn)練習(xí) 32
高手點(diǎn)撥 32
第2篇　基礎(chǔ)核心案例篇
　Vue核心概念及第一個(gè)Vue程序精講 34
3.1 　Vue.js的基本認(rèn)識(shí) 35
3.2 　Vue.js的優(yōu)點(diǎn)與核心思想 35
3.3 　Vue與React、Angular比較 36
3.4 　MVVM框架概述 37
3.5 　引入Vue 38
3.6 　第一個(gè)Vue程序 39
實(shí)戰(zhàn)練習(xí) 43
高手點(diǎn)撥 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
實(shí)戰(zhàn)練習(xí) 69
高手點(diǎn)撥 71

　事件修飾符、按鍵修飾符與系統(tǒng)修飾符 72
5.1 　DOM 事件流相關(guān)概念 73
5.2 　事件修飾符 74
5.3 　按鍵修飾符 79
5.4 　系統(tǒng)修飾符 83
實(shí)戰(zhàn)練習(xí) 85
高手點(diǎn)撥 87

第3篇　中級(jí)進(jìn)階實(shí)戰(zhàn)篇
　Vue實(shí)例常用的屬性和方法 117
7.1 　Vue實(shí)例常用屬性 118
7.2 　Vue實(shí)例常用方法 121
實(shí)戰(zhàn)練習(xí) 128
高手點(diǎn)撥 129

　自定義指令及過(guò)渡（動(dòng)畫(huà)） 130
8.1 　自定義指令 131
8.2 　過(guò)渡效果實(shí)現(xiàn) 135
8.3 　鉤子函數(shù)與動(dòng)畫(huà)呈現(xiàn) 139
8.4 　動(dòng)畫(huà)效果的實(shí)現(xiàn) 141
8.5 　結(jié)合第三方動(dòng)畫(huà)庫(kù)Animate.css一起使用 142
實(shí)戰(zhàn)練習(xí) 146
高手點(diǎn)撥 147

　自定義過(guò)濾器及開(kāi)發(fā)插件 148
9.1 　自定義過(guò)濾器 149
9.2 　開(kāi)發(fā)插件 153
實(shí)戰(zhàn)練習(xí) 156
高手點(diǎn)撥 157

　組件及組件間的通信 158
10.1 　組件的概念 159
10.6 　父子組件的定義及使用 175
10.7 　子組件訪(fǎng)問(wèn)父組件中的數(shù)據(jù) 177
10.8 　父組件訪(fǎng)問(wèn)子組件中的數(shù)據(jù) 181
實(shí)戰(zhàn)練習(xí) 205
高手點(diǎn)撥 205


　使用Vue Router實(shí)現(xiàn)路由控制實(shí)戰(zhàn) 222
12.1 　前端路由及實(shí)現(xiàn)前端路由的基本原理 223
12.2 　Vue Router的應(yīng)用 224
12.3 　前端路由嵌套 230
12.5 　實(shí)現(xiàn)路由導(dǎo)航跳轉(zhuǎn)的方式 237
12.6 　命名路由和命名視圖 242
12.7 　組件與路由間的解耦 246
實(shí)戰(zhàn)練習(xí) 250
高手點(diǎn)撥 251

　webpack資源打包工具實(shí)戰(zhàn) 252
13.1 　前端模塊化開(kāi)發(fā) 253
13.2 　webpack的基本認(rèn)識(shí) 253
13.3 　webpack的安裝 254
13.4 　webpack快速入門(mén)實(shí)操 256
實(shí)戰(zhàn)練習(xí) 261
高手點(diǎn)撥 261

　使用Vue Loader打包單文件組件實(shí)戰(zhàn) 286
16.2 　webpack結(jié)合Vue Loader打包單文件組件實(shí)戰(zhàn) 291
16.3 　持續(xù)改進(jìn)—采用render函數(shù)渲染組件 295
16.4 　完善改進(jìn)—豐富Vue單文件組件 296
實(shí)戰(zhàn)練習(xí) 305
高手點(diǎn)撥 305

　運(yùn)用Vue CLI 腳手架構(gòu)建項(xiàng)目實(shí)戰(zhàn) 306
17.1 　Vue CLI的概念及其安裝 307
17.2 　利用Vue CLI搭建Vue單頁(yè)面項(xiàng)目 308
17.3 　Vue CLI服務(wù)命令的使用 314
17.4 　Vue CLI腳手架創(chuàng)建的項(xiàng)目基本結(jié)構(gòu)歸納解析 316
17.5 　通過(guò)vue.config.js自定義配置選項(xiàng) 317
實(shí)戰(zhàn)練習(xí) 325
高手點(diǎn)撥 325

　Element UI應(yīng)用精講 326
18.2 　Layout布局 330
18.3 　Container 布局容器和Color色彩 332
18.4 　Typography 字體和Border 邊框 335
18.5 　Icon 圖標(biāo)和Button按鈕 337
18.6 　Radio 單選按鈕和Checkbox 復(fù)選框 341
18.7 　Input 輸入框和InputNumber 計(jì)數(shù)器 344
實(shí)戰(zhàn)練習(xí) 366
高手點(diǎn)撥 367

第4篇　綜合進(jìn)階項(xiàng)目篇
　圖書(shū)信息管理系統(tǒng)基礎(chǔ)框架搭建實(shí)戰(zhàn) 418
21.2 　項(xiàng)目腳手架搭建、更改標(biāo)題、圖標(biāo)及初始化配置 420
21.3 　安裝并配置Element UI 421
21.4 　封裝Axios對(duì)象 422
21.5 　使用封裝后的Axios對(duì)象發(fā)送請(qǐng)求返回?cái)?shù)據(jù)到前端 426
21.6 　開(kāi)發(fā)環(huán)境通過(guò)代理解決跨域請(qǐng)求 430
實(shí)戰(zhàn)練習(xí) 434
高手點(diǎn)撥 434

　圖書(shū)信息管理系統(tǒng)登錄模塊實(shí)現(xiàn) 435
22.1 　系統(tǒng)登錄頁(yè)面設(shè)計(jì) 436
22.2 　使用Element完善系統(tǒng)登錄頁(yè)面設(shè)計(jì) 437
22.3 　使用Easy Mock為登錄驗(yàn)證創(chuàng)建模擬接口 441
22.4 　登錄業(yè)務(wù)邏輯實(shí)現(xiàn) 443
實(shí)戰(zhàn)練習(xí) 446
高手點(diǎn)撥 446

　圖書(shū)信息管理系統(tǒng)主頁(yè)功能初步實(shí)現(xiàn) 447
23.1 　主頁(yè)布局設(shè)置 448
23.2 　利用Element設(shè)計(jì)頭部組件 451
23.3 　利用Element設(shè)計(jì)左側(cè)導(dǎo)航組件 453
23.4 　為左側(cè)導(dǎo)航配置路由 456
23.5 　利用Element UI實(shí)現(xiàn)主區(qū)域顯示當(dāng)前路徑 460
23.6 　退出系統(tǒng)功能實(shí)現(xiàn) 464
23.7 　路由權(quán)限校驗(yàn) 468
實(shí)戰(zhàn)練習(xí) 472
高手點(diǎn)撥 472

　圖書(shū)信息管理系統(tǒng)增刪改查實(shí)現(xiàn) 473
24.1 　使用Easy Mock添加圖書(shū)信息列表服務(wù)接口 474
24.2 　創(chuàng)建調(diào)用圖書(shū)信息列表服務(wù)接口獲取數(shù)據(jù)的API 475
24.3 　利用Element UI展示圖書(shū)信息列表數(shù)據(jù) 477
24.4 　利用過(guò)濾器轉(zhuǎn)換圖書(shū)類(lèi)型并重新渲染 479
24.5 　查詢(xún)圖書(shū)信息 .481
24.6 　添加圖書(shū)信息 495
24.7 　圖書(shū)信息的編輯功能實(shí)現(xiàn) 505
實(shí)戰(zhàn)練習(xí) 522
高手點(diǎn)撥 522

　修改密碼功能及完善系統(tǒng) 523
25.1 　修改密碼、創(chuàng)建模擬接口及封裝發(fā)送異步請(qǐng)求方法 524
25.2 　實(shí)現(xiàn)修改密碼組件及重置功能 525
25.3 　利用Element自定義校驗(yàn)規(guī)則校驗(yàn)密碼及確認(rèn)密碼 529
25.4 　修改密碼業(yè)務(wù)邏輯的實(shí)現(xiàn) 533
25.5 　全局設(shè)置數(shù)據(jù)加載Loading顯示效果 536
25.6 　全局處理Axios請(qǐng)求響應(yīng)異常 540
實(shí)戰(zhàn)練習(xí) 541
高手點(diǎn)撥 542

　利用ECharts+Vue生成動(dòng)態(tài)圖表的技術(shù) 543
26.1 　根據(jù)圖書(shū)類(lèi)別、庫(kù)存數(shù)量初步生成折線(xiàn)圖 544
26.2 　請(qǐng)求后端數(shù)據(jù)動(dòng)態(tài)生成圖表 546
實(shí)戰(zhàn)練習(xí) 552
高手點(diǎn)撥 552

　使用Vuex重構(gòu)圖書(shū)信息管理系統(tǒng) 553
27.2 　創(chuàng)建并初步編寫(xiě)登錄Vuex狀態(tài)管理器 555
27.3 　使用Vuex完善登錄的實(shí)現(xiàn) 558
27.4 　使用Vuex重構(gòu)項(xiàng)目解決頁(yè)面刷新回到登錄頁(yè)面問(wèn)題 561
27.5 　使用Vuex狀態(tài)管理登錄用戶(hù)信息 564
實(shí)戰(zhàn)練習(xí) 570
高手點(diǎn)撥 570

　項(xiàng)目上線(xiàn)部署及生產(chǎn)環(huán)境跨域問(wèn)題解決 571
28.1 　項(xiàng)目打包、準(zhǔn)備好服務(wù)器及選擇Web服務(wù)器 572
28.2 　上傳文件到服務(wù)器和查看服務(wù)器安裝的工具 574
28.4 　配置 nginx.conf 和上傳打包后的項(xiàng)目 580
實(shí)戰(zhàn)練習(xí) 584
高手點(diǎn)撥 584