Vue.js 全家桶零基礎入門到進階項目實戰
內容描述
本書的宗旨是:幫助讀者全面掌握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 佈局佈局330
18.3 容器佈局容器和色彩色彩 332
18.4 字體字體和邊框邊框335
18.5 圖標圖標和按鈕按鈕 337
18.6 單選按鈕和復選框一鍵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 使用元素改進登錄頁面設計 437
22.3 使用Easy Mock為登錄驗證創建模擬接口 441
22.4 登錄業務邏輯實現 443
實戰練習 446
高手點撥 446
圖書信息管理主頁功能實現447
23.1 主頁佈局設置 448
23.2 利用元素設計盲組件451
23.3 利用Element設計左側導航組件453
23.4為左側導航配置導航456
23.5利用元素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利用元素自定義規則密碼及確認密碼529
25.4 修改密碼業務邏輯的實現 533
25.5 全局設置數據加載加載顯示效果 536
25.6 異常處理 Axios 請求響應異常 540
實戰練習 541
高手點撥542
利用ECharts+Vue生成動態圖表的技術543
26.可知書類別、數量展示生成折線圖 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
作者介紹
徐照,2020年獲得首屆江西省普通高校教師品牌教授,優秀的項目經理,51CTO學院特級講師,CSDN學院、騰訊課堂、網易云課堂、教育等在線教育平台講師。
主要研究領域為計算機應用技術教學、Web數據庫應用程序開發、智能信息系統開發。
任教的課程獲批江西省精品開放課程、江西省線上線下混合式質量課程;指導學生參加省級以上賽事,多次獲一等獎、二等獎、三等獎,少數獲優秀指導 教師;以主持人代表獲得中國紡織工業聯合會教學成果獎二等獎、三等獎各1項,校級教學成果獎一等獎、二等獎各1項。 登記權20餘項。