內容簡介
本書的宗旨是:幫助讀者全面掌握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技術。
圖書目錄
第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
作者簡介
徐照興,教授,主要研究領域為Web資料庫應用程式開發、計算機套用技術教學,現任江西服裝學院大數據學院院長、物聯網工程專業帶頭人,南昌縣科協五屆常委、江西省5G產業聯合會專家委員會首席專家、江西省職業技能鑑定考評員、江西省高等教育教學與教學管理專家庫成員、江西省專業技術資格評審會評審庫成員。同時為51CTO學院特級講師、CSDN學院、騰訊課堂、網易雲課堂、淘寶教育等線上教育平台講師等,至今網上各類學員超80萬,受到學員的高度好評。