Vue.js光速入門及企業(yè)項目開發(fā)實戰(zhàn)
定 價:69 元
本書采用簡潔直觀的方式來講解Vue2的各方面,并融入了關于Git的基礎和進階的知識,讓讀者在學習前端框架之余,還能學習到主流的團隊代碼管理工具和版本控制工具Git的知識應用。本書共11章,分為基礎篇和進階篇和項目實戰(zhàn)篇;A篇(第1~3章)詳細講述Vue框架的基礎知識點,并以HTML文件的方式切入,淺顯易懂,讓你的學習體驗達到最優(yōu)。進階篇(第4~8章)從webpack起步,系統(tǒng)地講述webpack項目搭建,腳手架來源并切入到基于腳手架的開發(fā)模式中。在進階篇中還講到Vue.js的高級語法(包括Vuex,Vue路由)的應用及Vue 3.js新增的語法。項目實戰(zhàn)篇(第9~11章),分別用Vue2技術實現了通用后臺管理系統(tǒng)和大型PC商城的兩個實戰(zhàn)項目及對Git講解。本書示例代碼豐富,實際性和系統(tǒng)性較強,并配有視頻講解,助力讀者透徹理解書中的重點、難點。本書適合有少量HTML CSS JavaScript基礎的初學者入門,并可作為高等院校和培訓機構相關專業(yè)的教學參考書。
本書是一本基礎入門加實戰(zhàn)的書籍,既有基礎知識,又有豐富示例,包括詳細的操作步驟,實操性強。 注重基礎:從零開始教授Vue基礎語法,幫助讀者從原生JS的DOM操作習慣轉變?yōu)閿祿寗右晥D更新的開發(fā)思路,由淺入深幫助讀者徹底掌握Vue語法; 注重實戰(zhàn):每兩三章配有項目實戰(zhàn),通過實戰(zhàn)鞏固知識點,更能體現出知識點的實際應用場景,讓讀者學有所用。
當前的Web開發(fā)正處于一個迅速發(fā)展和不斷演變的時代,在這個過程中,Vue.js作為一款優(yōu)秀的前端框架,迅速地在業(yè)界贏得了廣泛的認可和普及,目前國內市場還是以Vue.js?2.0為主導。作為Vue.js的主要版本,Vue.js?2.0不僅繼承了Vue.js的核心概念和優(yōu)勢,還帶來了更多的改進和增強,為我們構建強大、靈活、高效的Web應用提供了更多的可能。 筆者最早接觸的前端框架技術是jQuery技術,隨著2013年React的面世,到2014年引入中國,筆者開始接觸React項目,成為中國第一批吃螃蟹的人。目前Vue.js?2.0的盛行和Vue.js?3.0的來臨,筆者意識到Vue.js?2.0是前端初學者最好入手且是目前國內前端市場應用最廣的前端框架,所以本書并沒有從Vue.js?3.0開始介紹。筆者認為這個學習過程是逐層遞進的,對初學者打好堅實的框架基礎非常有幫助。此外,筆者還精心錄制了一套前端的學習視頻(前端基礎到進階jQuery、Vue.js?2.0、微信小程序、React、Vue.js?3.0、TypeScript等),目前播放量已近八十萬人次。 筆者寫作本書的目的是想傳播前端框架領域知識(因為Vue.js是國人所編寫,并且確實優(yōu)秀),想為Web前端社區(qū)做一些貢獻的同時也為叩丁狼教育的產品打下堅實的技術基礎。寫作本書期間,筆者查閱了大量的資料,使知識體系擴大了不少,收獲良多。 本書主要內容 第1章介紹Vue.js框架、安裝方式及其基礎語法結構。 第2章介紹常用及不常用的指令(包括事件綁定指令及屬性綁定指令等),以及計算屬性。 第3章介紹過濾器、組件化開發(fā)及書店購物車項目實戰(zhàn)。 第4章介紹Webpack及Vue.js的官方腳手架Vue CLI等。 第5章介紹Vue.js高級語法,如Vue插槽、修飾符、監(jiān)聽、動態(tài)組件和緩存及其他高級語法。 第6章介紹DevTools開發(fā)工具的使用及Vuex的核心概念等。 第7章介紹Vue?Router及后端數據請求。 第8章介紹Vue.js?3.0新增語法。 第9章介紹Vue.js?2.0全家桶 Element開發(fā)后臺管理系統(tǒng)項目,該項目可在企業(yè)后臺管理項目中直接套入使用。 第10章介紹Git基礎知識和進階使用、Git Flow工作流模型,以及拓展了Git高級用法。 第11章介紹大型PC商城項目實戰(zhàn),并提供了用戶行為驗證、微信掃碼登錄、購物車、觸底加載等常見的解決方案。 閱讀建議 本書是一本基礎入門加實戰(zhàn)的書籍,既有基礎知識,又有豐富示例,包括詳細的操作步驟,實操性強。 關于學習的方式,建議讀者從第1章開始(不建議零基礎讀者跳看Vue.js?3.0的章節(jié)),閱讀完每個知識點案例之后,根據書中(或者資料中)給到的代碼輸入一遍,并理解,這個過程還要結合書中給的代碼進行閱讀理解,有助于更快速地掌握和理解知識點。 從第4章開始,進入Webpack的學習,這一章可以快速閱讀,如遇問題不用在相關問題中糾結太久,反而會影響學習節(jié)奏。可以嘗試先學習Vue CLI的安裝和使用,并往后學 習。因為做項目實戰(zhàn),用的就是Vue CLI,所以直接上手亦可。待后期做完項目后再返回學習并深究Webpack。 第6章和第7章是做項目時會運用到的重點,寫到Vuex和Vue?Router,建議結合書中的視頻來學習,這樣會更加容易理解和上手。 第9章和第11章屬于項目實戰(zhàn)部分,讀者在掌握了前面的基礎知識后,可以通過兩個實戰(zhàn)項目學習企業(yè)應用的一些解決方案。在學習過程中遇到Bug不必緊張,程序員開發(fā)項目遇到Bug是正常的,通過百度、谷歌甚至ChatGPT翻譯一下,即可得到解決方案。 掃描目錄上方二維碼可下載本書源碼。 致謝 感謝單位領導及同事。特別感謝前端團隊的老師們,幫助我處理好團隊中的其他事務,使我可以全身心地投入寫作工作之中。 由于時間倉促,書中難免存在不妥之處,請讀者見諒,并提寶貴意見。 莊慶樂 2023年 12月
II
III
莊慶樂,工業(yè)和信息化部認證的高級Web前端開發(fā)工程師、國內首批React開發(fā)者之一、機構Web前端名師。曾擔任啟法信息科技有限公司前端組主管,獨立設計研發(fā)門戶網站平臺;曾擔任培訓機構前端學科主管,并且錄制了一套完整的Web前端課程,以及一套完整的Node.js從基礎到后端項目實戰(zhàn)課程。主攻前端技術領域,擅長Vue.js、React、Node.js及微信小程序等前端流行框架。
任小龍,互聯(lián)網知名IT講師,擁有超過13年的互聯(lián)網開發(fā)和教育培訓經歷,在Web前端、Java、人工智能等領域都有深入研究,并把研究成果以課程和書籍的方式回饋給學員。現任叩丁狼教育教學總監(jiān),帶領團隊孜孜不倦地研發(fā)課程和教學方法,成果顯著,已培養(yǎng)超過2萬名優(yōu)秀IT人才,為業(yè)界樹立了教育領域的標桿。
陳世云,曾代表中國電信廣東省公司參與電信集團大客戶項目,擔任微服務技術架構師,與23省技術團隊聯(lián)合研發(fā)100多個項目,最早一批采用微服務、前后端分離技術架構,原生iOS安卓混合開發(fā)技術架構設計,交叉團隊部署理念設計者,對 IT行業(yè)各種崗位及職業(yè)規(guī)劃有深入了解。
第1章 Vue.js基礎語法 11.1 Vue.js框架簡介 11.1.1 國內外前端主流框架分析 11.1.2 Vue.js框架簡介 21.1.3 Vue.js開發(fā)編輯器 21.1.4 Vue.js安裝 31.2 Vue.js語法結構 41.2.1 實例化Vue與Mustache語法 41.2.2 雙向數據綁定及其原理 61.2.3 Vue.js文件中的MVVM 8第2章 Vue.js指令、事件與計算屬性 92.1 Vue.js基礎指令 92.2 事件綁定指令 142.3 屬性綁定指令 172.4 計算屬性 21第3章 過濾器及組件化開發(fā) 253.1 過濾器與生命周期 253.1.1 Filter過濾器 253.1.2 LifeCycle生命周期 273.2 組件化開發(fā) 283.2.1 組件化開發(fā)的必要性 283.2.2 全局組件 283.2.3 局部組件 333.3 書店購物車項目實戰(zhàn) 39
第4章 Webpack、Slot與 Vue CLI腳手架 464.1 Webpack模塊化打包工具 464.1.1 Webpack的簡介與安裝 464.1.2 Webpack基本配置 484.1.3 webpack-dev-server 494.1.4 html-webpack-plugin 504.1.5 loader 514.1.6 babel 524.1.7 HTML熱更新 534.1.8 圖片資源 544.2 Vue CLI 554.2.1 Vue CLI的簡介與安裝 554.2.2 Vue CLI創(chuàng)建項目 564.2.3 Vue CLI項目預覽 58第5章 Vue.js高級語法 615.1 插槽 615.1.1 匿名插槽 615.1.2 具名插槽 625.1.3 作用域插槽 635.2 修飾符 645.2.1 表單修飾符 645.2.2 事件修飾符 655.2.3 按鍵修飾符 665.3 監(jiān)聽 665.3.1 普通監(jiān)聽 665.3.2 立即監(jiān)聽 675.3.3 深度監(jiān)聽 685.3.4 deep優(yōu)化 695.4 動態(tài)組件與組件緩存 705.4.1 動態(tài)組件 705.4.2 KeepAlive緩存組件 715.5 Vue.js其他高級用法 72第6章 Vuex 766.1 DevTools 766.2 Vuex 796.2.1 Vuex簡介與安裝 796.2.2 Vuex核心概念 80第7章 路由與請求 857.1 路由 857.1.1 Vue Router簡介與安裝 857.1.2 路由文件配置 867.1.3 路由跳轉 877.1.4 導航守衛(wèi) 887.2 請求 90第8章 Vue.js 3.0新增語法 938.1 Vue.js?3.0起步 938.2 Vue.js?3.0新增語法 948.2.1 Composition API 948.2.2 Provide與Inject 988.2.3 Teleport 988.2.4 Suspense 998.2.5 Fragment 1008.2.6 TreeShaking 1018.2.7 Performance提升 1028.2.8 生命周期 102第9章 項目一:Vue.js?2.0全家桶 Element開發(fā)后臺管理系統(tǒng) 1039.1 創(chuàng)建項目與添加Element模塊 1039.2 項目初始化 1049.3 登錄組件的初步引入及使用 1059.4 登錄組件的初步完善 1069.4.1 登錄頁面 1069.4.2 覆蓋Element UI樣式的正確寫法 1089.4.3 書寫校驗規(guī)則 1089.4.4 自定義校驗規(guī)則 1099.4.5 校驗 1099.4.6 企業(yè)級項目驗證 1109.4.7 驗證碼圖片的獲取 1119.5 封裝axios的攔截器 1119.6 完善登錄模塊 1129.7 錯誤提示及其統(tǒng)一處理方案 1159.8 登錄成功后跳轉到首頁 1179.9 經典三欄布局解決方案 1189.10 書寫路由守衛(wèi) 1209.11 手寫菜單欄 1219.11.1 折疊菜單按鈕的初步規(guī)劃 1219.11.2 菜單展開和折疊狀態(tài)的展示 1229.11.3 是否折疊導航欄 1239.11.4 修改Vuex中isNavCollapse的值 1249.11.5 菜單欄折疊卡頓的問題 1259.11.6 折疊過渡效果的實現 1259.11.7 補充Logo和標題 1269.11.8 定義初始數據導航 1269.11.9 菜單實現路由跳轉 1289.12 統(tǒng)一處理請求后的code==200的情況 1299.13 動態(tài)生成菜單欄 1319.13.1 請求獲取用戶菜單列表 1319.13.2 分析思路 1349.13.3 處理menuData數組 1359.14 修改二級菜單欄的樣式補充 1379.15 圖標處理 1389.16 認證失敗處理 1399.17 配置子路由(內容部分) 1399.18 動態(tài)添加子路由規(guī)則 1409.19 添加路由切換的過渡動畫 1429.20 面包屑處理 1439.20.1 渲染和樣式初步處理 1439.20.2 title的收集 1449.20.3 在面包屑組件中展示title 1459.20.4 解決網址欄跳轉但視圖不更新的情況 1459.21 404頁面的處理 1469.22 刪除token 1479.23 用戶信息處理 1479.23.1 登錄成功獲取用戶信息 1479.23.2 下拉菜單及退出登錄 1509.24 標簽欄處理 1519.24.1 初步布局 1519.24.2 組織tags數組 1529.24.3 當前樣式的處理 1539.24.4 跳轉處理 1559.24.5 刪除標簽 1559.24.6 右擊出現快捷菜單 1569.24.7 菜單項現實邏輯的控制 1569.24.8 靜動態(tài)路由的區(qū)分 1589.24.9 關閉標簽欄 1599.24.10 根據單擊的項目對tags進行操作 1609.25 表格處理 1619.26 分頁處理 1649.27 導出文件與上傳文件的處理 1659.27.1 導出文件 1659.27.2 上傳文件 166第10章 Git介紹 16910.1 Git的基本使用 17010.2 Git Flow工作流模型 17410.3 Git拓展 176第11章 項目二:大型PC商城 18211.1 項目準備 18211.2 網站數據請求模塊 18311.3 頭部組件 18611.3.1 版心樣式 18611.3.2 頭部組件布局 18611.4 導航組件 18811.4.1 基本布局 18811.4.2 搜索框布局 18911.4.3 路由配置及導航項當前樣式 19011.5 登錄模塊布局 19211.5.1 模態(tài)窗口的書寫 19211.5.2 設置單擊展示模態(tài)窗口 19311.5.3 單擊關閉模態(tài)窗口 19511.5.4 單擊標題欄的切換效果 19611.5.5 表單基本布局 19711.6 拼圖驗證滑塊 19911.7 單擊獲取驗證碼按鈕的邏輯 20111.7.1 邏輯分析 20111.7.2 判斷手機號格式 20111.7.3 倒計時及其展示 20211.7.4 連續(xù)單擊倒計時Bug 20311.7.5 抽取工具函數 20411.7.6 發(fā)起獲取驗證碼請求 20511.7.7 請求成功回調函數的完善 20611.8 手機號碼登錄邏輯分析 20711.8.1 抽取前兩個驗證的代碼 20711.8.2 發(fā)起登錄請求 20811.8.3 登錄成功后的邏輯 20911.8.4 購物車按鈕的布局 21011.8.5 購物車按鈕展示(登錄狀態(tài))分析 21111.9 提示組件的封裝 21211.9.1 icon圖標的使用 21211.9.2 Toast組件的初步封裝與使用 21311.9.3 Toast組件展示 21511.9.4 Toast組件的進場離場效果 21611.9.5 封裝Toast的屬性 21711.9.6 Toast組件自動關閉的處理 21811.9.7 總結:提示框組件的使用 21911.10 微信掃碼登錄微信登錄二維碼的獲取與展示 22011.10.1 獲取微信二維碼 22011.10.2 微信二維碼樣式調整 22011.11 微信掃碼登錄用臨時票據code換取token 22111.12 手機驗證碼登錄 22311.13 路由監(jiān)聽及其應用 22311.14 組件重載 22511.15 獲取登錄用戶信息 22611.16 用戶信息渲染 22711.17 刪除token后的用戶信息初始化 23011.18 首頁布局的套用 23011.19 詳情頁的處理 24011.20 單擊加入購物車 24711.21 全部商品頁面 24811.21.1 結構樣式套用 24811.21.2 商品列表渲染 25011.21.3 選項數據的分析和渲染 25111.21.4 單擊選項,切換商品列表 25211.21.5 搜索框事件 25311.22 導航守衛(wèi) 25411.22.1 全局導航守衛(wèi) 25411.22.2 組件內部導航守衛(wèi) 25511.23 個人中心購物車頁面 25511.24 404處理 26611.25 滾動到底部加載更多 26611.26 跨域配置 26911.27 項目環(huán)境變量配置 270
IV
V