《Vue.js全家桶零基礎(chǔ)入門到進階項目實戰(zhàn)》的宗旨是:幫助讀者全面掌握Vue.js全家桶技術(shù)、掌握單頁面前后端分離項目開發(fā),并知其所以然,理解MVVM框架思想;讓不會前端的后端開發(fā)人員,快速精通Vue.js全家桶技術(shù)。
《Vue.js全家桶零基礎(chǔ)入門到進階項目實戰(zhàn)》貫穿講解Npm、VSCode、Vue核心基礎(chǔ)、中級進階、綜合進階、項目上線部署等全過程,循序漸進、環(huán)環(huán)相扣、通俗易懂講解,分析為什么這樣使用,讓你知其所以然。主要技術(shù)包括:NPM/CNPM、VSCode、Vue.js、MVVM、Axios、Vue Router、Webpack、ES6、Vue Loader、Vue CLI、Element UI、Vuex、Mock.js、EasyMock、Echarts 、Promise、攔截器、組件通信、跨域問題、上線部署等。
《Vue.js全家桶零基礎(chǔ)入門到進階項目實戰(zhàn)》適合前端開發(fā)人員、后端開發(fā)人員閱讀,包括:在校生,需要掌握流行的新技術(shù),做到與職場同步;在職人員,需要系統(tǒng)全面高效使用Vue技術(shù)。
Vue、React、Angular是當今前端界的三駕馬車,通過從GitHub上搜索星級指數(shù)或從招聘網(wǎng)站上搜索前端工程師對技術(shù)的要求可知,Vue在國內(nèi)非常流行,不僅前端設(shè)計人員必須掌握,而且后端程序員也必須掌握。
目前市場上關(guān)于Vue的書并不少,但很多存在以下問題:,版本舊,基本是基于Vue 2.6以下版本;第二,沒有真正針對零基礎(chǔ)讀者進行講解;第三,講解晦澀,很多文字來自官方文本;第四,注重理論分析,忽略實操的講解;第五,內(nèi)容不全面、不深入。本書的編寫正好可以彌補這些方面的不足。
本書以讀者的視角,從工程實用角度出發(fā),針對目前Vue及其周邊生態(tài)版技術(shù),通過實例精講的形式,由易到難、由淺入深、由小實例到綜合項目一步步講解實操及分析。全書共分4篇28章,主要內(nèi)容如下。
第1篇為入門準備實操篇,精講NPM包的安裝及使用、Visual Studio Code開發(fā)工具的安裝及配置,為Vue的學(xué)習(xí)做好必要的準備,為后續(xù)更好地學(xué)習(xí)奠定基礎(chǔ)。
第2篇為基礎(chǔ)核心案例篇,主要講解Vue.js基礎(chǔ)核心內(nèi)容,包括Vue.js的核心思想、MVVM框架、常用指令、事件修飾符、按鍵修飾符、系統(tǒng)修飾符、計算屬性、監(jiān)聽器、Vue實例生命周期等。掌握好這些內(nèi)容就能初步使用Vue進行開發(fā),同時也為進一步深入學(xué)習(xí)Vue奠定堅實基礎(chǔ)。
第3篇為中級進階實戰(zhàn)篇,主要講解Vue實例常用屬性和方法、自定義指令、自定義過濾器、過渡、開發(fā)插件、組件及組件間的通信、使用Axios發(fā)送HTTP請求、使用Vue Router實現(xiàn)路由控制,使用webpack打包工具的方法、ECMAScript 6的語法、webpack與各種插件的配合使用、Vue CLI腳手架的搭建、Element UI的應(yīng)用、Vuex的應(yīng)用、Mock和Easy Mock的應(yīng)用。掌握好上述內(nèi)容,可助力讀者全面理解Vue及其周邊生態(tài)技術(shù),并能夠應(yīng)用到項目中。
第4篇為綜合進階項目篇,主要以開發(fā)圖書信息管理系統(tǒng)為例,講解單頁面前端與后端分離項目的開發(fā),主要用到的技術(shù)包括Vue.js、Vue CLI、webpack、Vue Router、Axios、Vuex、Element、Easy Mock、ECharts。綜合運用Vue及周邊生態(tài)技術(shù)進行單頁面前端與后端分離項目開發(fā),全面鞏固加深對Vue.js的理解,后實現(xiàn)上線部署。
本書的優(yōu)勢和特色如下:
1.技術(shù)全面、完整、系統(tǒng)對標企業(yè)項目技術(shù)棧
從Vue入門準備需要的知識到單頁面前后端分離的綜合進階項目講解,并上線于阿里云服務(wù)器,全面完整地講解Vue全家桶技術(shù),即包含周邊生態(tài)技術(shù),而且所講技術(shù)版本均為當前。
2.講解詳細、通俗易懂分析循序漸進且邏輯強
本書主要以案例形式講解,撰寫細致、條理清晰、通俗易懂,重在分析為什么,讓讀者知其所以然,沒有晦澀的專業(yè)詞匯,對實操部分均給出詳細清晰的步驟。
3.有學(xué)習(xí)討論交流群快速成為前端工程師
對購買本書的讀者,可以掃描作者的微信二維碼加為好友,由作者拉入專門的學(xué)習(xí)討論交流微信群。在學(xué)習(xí)過程中遇到任何問題都可以在微信群中討論交流。
本書配套資源有源代碼、需要用到的工具軟件等,已上傳至百度網(wǎng)盤,供讀者下載。讀者可關(guān)注封底博雅讀書社微信公眾號,找到資源下載欄目,根據(jù)提示獲取。
由于時間倉促,加之作者水平有限,書中難免存在一些不足之處,歡迎廣大讀者批評和指正。
徐照興,教授,主要研究領(lǐng)域為Web數(shù)據(jù)庫應(yīng)用程序開發(fā)、計算機應(yīng)用技術(shù)教學(xué),現(xiàn)任江西服裝學(xué)院大數(shù)據(jù)學(xué)院院長、物聯(lián)網(wǎng)工程專業(yè)帶頭人,南昌縣科協(xié)五屆常委、江西省5G產(chǎn)業(yè)聯(lián)合會專家委員會首席專家、江西省職業(yè)技能鑒定考評員、江西省高等教育教學(xué)與教學(xué)管理專家?guī)斐蓡T、江西省專業(yè)技術(shù)資格評委會評委庫成員。同時為51CTO學(xué)院特級講師、CSDN學(xué)院、騰訊課堂、網(wǎng)易云課堂、淘寶教育等在線教育平臺講師等,至今網(wǎng)上各類學(xué)員超80萬,受到學(xué)員的高度好評。劉建華
第1篇 入門準備實操篇
NPM包的安裝及使用 2
1.1 NPM概述 3
1.2 NPM安裝 3
1.3 配置Node.js環(huán)境(NPM全局安裝路徑) 5
1.4 通過NPM初始化項目 6
1.5 安裝模塊(JS庫) 8
1.6 生產(chǎn)環(huán)境和開發(fā)環(huán)境依賴模塊的安裝 13
1.7 CNPM命令的安裝 15
1.8 批量下載模塊 16
1.9 其他常用NPM命令 17
實戰(zhàn)練習(xí) 19
高手點撥 20
VS Code開發(fā)工具的安裝及配置 21
2.1 VS Code開發(fā)工具的特點與安裝 22
2.2 常用插件安裝 23
2.3 VS Code常用設(shè)置 27
2.4 設(shè)置新建文件類型 28
2.5 常用的快速編輯技巧 30
2.6 解決VS Code卡頓 32
實戰(zhàn)練習(xí) 32
高手點撥 32
第2篇 基礎(chǔ)核心案例篇
Vue核心概念及個Vue程序精講 34
3.1 Vue.js的基本認識 35
3.2 Vue.js的優(yōu)點與核心思想 35
3.3 Vue與React、Angular比較 36
3.4 MVVM框架概述 37
3.5 引入Vue 38
3.6 個Vue程序 39
實戰(zhàn)練習(xí) 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
實戰(zhàn)練習(xí) 69
高手點撥 71
事件修飾符、按鍵修飾符與系統(tǒng)修飾符 72
5.1 DOM 事件流相關(guān)概念 73
5.2 事件修飾符 74
5.3 按鍵修飾符 79
5.4 系統(tǒng)修飾符 83
實戰(zhàn)練習(xí) 85
高手點撥 87
第3篇 中級進階實戰(zhàn)篇
Vue實例常用的屬性和方法 117
7.1 Vue實例常用屬性 118
7.2 Vue實例常用方法 121
實戰(zhàn)練習(xí) 128
高手點撥 129
自定義指令及過渡(動畫) 130
8.1 自定義指令 131
8.2 過渡效果實現(xiàn) 135
8.3 鉤子函數(shù)與動畫呈現(xiàn) 139
8.4 動畫效果的實現(xiàn) 141
8.5 結(jié)合第三方動畫庫Animate.css一起使用 142
實戰(zhàn)練習(xí) 146
高手點撥 147
自定義過濾器及開發(fā)插件 148
9.1 自定義過濾器 149
9.2 開發(fā)插件 153
實戰(zhàn)練習(xí) 156
高手點撥 157
組件及組件間的通信 158
10.1 組件的概念 159
10.6 父子組件的定義及使用 175
10.7 子組件訪問父組件中的數(shù)據(jù) 177
10.8 父組件訪問子組件中的數(shù)據(jù) 181
實戰(zhàn)練習(xí) 205
高手點撥 205
使用Vue Router實現(xiàn)路由控制實戰(zhàn) 222
12.1 前端路由及實現(xiàn)前端路由的基本原理 223
12.2 Vue Router的應(yīng)用 224
12.3 前端路由嵌套 230
12.5 實現(xiàn)路由導(dǎo)航跳轉(zhuǎn)的方式 237
12.6 命名路由和命名視圖 242
12.7 組件與路由間的解耦 246
實戰(zhàn)練習(xí) 250
高手點撥 251
webpack資源打包工具實戰(zhàn) 252
13.1 前端模塊化開發(fā) 253
13.2 webpack的基本認識 253
13.3 webpack的安裝 254
13.4 webpack快速入門實操 256
實戰(zhàn)練習(xí) 261
高手點撥 261
使用Vue Loader打包單文件組件實戰(zhàn) 286
16.2 webpack結(jié)合Vue Loader打包單文件組件實戰(zhàn) 291
16.3 持續(xù)改進采用render函數(shù)渲染組件 295
16.4 完善改進豐富Vue單文件組件 296
實戰(zhàn)練習(xí) 305
高手點撥 305
運用Vue CLI 腳手架構(gòu)建項目實戰(zhàn) 306
17.1 Vue CLI的概念及其安裝 307
17.2 利用Vue CLI搭建Vue單頁面項目 308
17.3 Vue CLI服務(wù)命令的使用 314
17.4 Vue CLI腳手架創(chuàng)建的項目基本結(jié)構(gòu)歸納解析 316
17.5 通過vue.config.js自定義配置選項 317
實戰(zhàn)練習(xí) 325
高手點撥 325
Element UI應(yīng)用精講 326
18.2 Layout布局 330
18.3 Container 布局容器和Color色彩 332
18.4 Typography 字體和Border 邊框 335
18.5 Icon 圖標和Button按鈕 337
18.6 Radio 單選按鈕和Checkbox 復(fù)選框 341
18.7 Input 輸入框和InputNumber 計數(shù)器 344
實戰(zhàn)練習(xí) 366
高手點撥 367
第4篇 綜合進階項目篇
圖書信息管理系統(tǒng)基礎(chǔ)框架搭建實戰(zhàn) 418
21.2 項目腳手架搭建、更改標題、圖標及初始化配置 420
21.3 安裝并配置Element UI 421
21.4 封裝Axios對象 422
21.5 使用封裝后的Axios對象發(fā)送請求返回數(shù)據(jù)到前端 426
21.6 開發(fā)環(huán)境通過代理解決跨域請求 430
實戰(zhàn)練習(xí) 434
高手點撥 434
圖書信息管理系統(tǒng)登錄模塊實現(xiàn) 435
22.1 系統(tǒng)登錄頁面設(shè)計 436
22.2 使用Element完善系統(tǒng)登錄頁面設(shè)計 437
22.3 使用Easy Mock為登錄驗證創(chuàng)建模擬接口 441
22.4 登錄業(yè)務(wù)邏輯實現(xiàn) 443
實戰(zhàn)練習(xí) 446
高手點撥 446
圖書信息管理系統(tǒng)主頁功能初步實現(xiàn) 447
23.1 主頁布局設(shè)置 448
23.2 利用Element設(shè)計頭部組件 451
23.3 利用Element設(shè)計左側(cè)導(dǎo)航組件 453
23.4 為左側(cè)導(dǎo)航配置路由 456
23.5 利用Element UI實現(xiàn)主區(qū)域顯示當前路徑 460
23.6 退出系統(tǒng)功能實現(xiàn) 464
23.7 路由權(quán)限校驗 468
實戰(zhàn)練習(xí) 472
高手點撥 472
圖書信息管理系統(tǒng)增刪改查實現(xiàn) 473
24.1 使用Easy Mock添加圖書信息列表服務(wù)接口 474
24.2 創(chuàng)建調(diào)用圖書信息列表服務(wù)接口獲取數(shù)據(jù)的API 475
24.3 利用Element UI展示圖書信息列表數(shù)據(jù) 477
24.4 利用過濾器轉(zhuǎn)換圖書類型并重新渲染 479
24.5 查詢圖書信息 .481
24.6 添加圖書信息 495
24.7 圖書信息的編輯功能實現(xiàn) 505
實戰(zhàn)練習(xí) 522
高手點撥 522
修改密碼功能及完善系統(tǒng) 523
25.1 修改密碼、創(chuàng)建模擬接口及封裝發(fā)送異步請求方法 524
25.2 實現(xiàn)修改密碼組件及重置功能 525
25.3 利用Element自定義校驗規(guī)則校驗密碼及確認密碼 529
25.4 修改密碼業(yè)務(wù)邏輯的實現(xiàn) 533
25.5 全局設(shè)置數(shù)據(jù)加載Loading顯示效果 536
25.6 全局處理Axios請求響應(yīng)異常 540
實戰(zhàn)練習(xí) 541
高手點撥 542
利用ECharts Vue生成動態(tài)圖表的技術(shù) 543
26.1 根據(jù)圖書類別、庫存數(shù)量初步生成折線圖 544
26.2 請求后端數(shù)據(jù)動態(tài)生成圖表 546
實戰(zhàn)練習(xí) 552
高手點撥 552
使用Vuex重構(gòu)圖書信息管理系統(tǒng) 553
27.2 創(chuàng)建并初步編寫登錄Vuex狀態(tài)管理器 555
27.3 使用Vuex完善登錄的實現(xiàn) 558
27.4 使用Vuex重構(gòu)項目解決頁面刷新回到登錄頁面問題 561
27.5 使用Vuex狀態(tài)管理登錄用戶信息 564
實戰(zhàn)練習(xí) 570
高手點撥 570
項目上線部署及生產(chǎn)環(huán)境跨域問題解決 571
28.1 項目打包、準備好服務(wù)器及選擇Web服務(wù)器 572
28.2 上傳文件到服務(wù)器和查看服務(wù)器安裝的工具 574
28.4 配置 nginx.conf 和上傳打包后的項目 580
實戰(zhàn)練習(xí) 584
高手點撥 584