大家好,我是河畔一角,時隔半年再次給大家帶來一門重量級的實戰課程:《Vue全家桶高仿小米商城》,現在很多公司都在參與到商城的構建體系當中,因此掌握一套商城的標准開發體系非常重要;商城的開始時非常復雜的,包括眾多的頁面設計和交互,以及非常豐富的知識點,所以一旦學會商城開發,其它系統完全不在話下。
下面給大家介紹一下小米商城包含的知識點和內容:
商城的頁面流程:
商城組件部分:
NavHeader(導航頭組件)、NavFooter(導航底部組件)、ServiceBar(服務條組件)、ProductParam(產品參數吸附組件)、OrderHeader(訂單頭組件)、Loading(加載組件)、Modal(彈框組件)、No-Data(無數據組件)、ScanPayCode(支付封裝組件)
課程所包含的知識圖譜:
上面主要從6個方面介紹了課程所包含的技術點,分別為:基礎知識、動畫部分、其它知識、UI、框架、項目架構等
此次課程一共包含了十六個章節:
第一章:課程簡介
對課程的整體內容做介紹,並講解Node環境安裝和配置,以及Node版本如何做卸載和升級。
第二章:Git安裝和配置
首先介紹Git軟件的安裝和配置,其次對Git命令做詳細的操作演示。
第三章:VueCli4.0安裝和使用
首次對Vue腳手架4.0版本做安裝和演示,並對可視化功能做詳細介紹。
第四章:項目基礎架構
此章節全力講解前端基本項目架構,通過此章節可搭建一個通用性的前端架構,內容涵蓋跨域方案、路由封裝、錯誤攔截等。
第五章:商城首頁
介紹了首頁各個組件的靜態代碼實現,並實現了圖片懶加載插件集成和Modal動畫實現。
第六章:登錄頁面
登錄頁面交互和接口完整代碼實現。
第七章:Vuex集成
Vuex插件的入門和實戰應用。
第八章:產品站頁面
介紹產品站頁面吸頂組件、參數組件、視頻模塊以及Slide動畫等實現。
第九章:商品詳情頁面
商品詳情交互接口實現。
第十章:購物車頁面
主要講解了購物車頭部組件以及購物車所有功能的動態交互實現。
第十一章:ElementUI集成
ElementUI框架的入門介紹和課程中的實戰集成運用。
第十二章:訂單確認頁面
訂單確認頁面中部分靜態模塊實現以及接口功能實現。
第十三章:訂單支付
主要講解訂單結算交互實現,同時包含微信支付和支付寶支付同后台對接。
第十四章:訂單列表
介紹了訂單列表的數據渲染和分頁功能實現。
第十五章:上線部署
代碼性能優化、打包和線上部署
第十六章:課程總結
對整個商城課程的講解做總結,幫助大家回顧和整理整個商城的學習內容。
接下來,給大家看一下此次商城的界面展示:
首頁:
登錄:帳號密碼 admin/admin
產品站:
商品詳情:
購物車:
訂單確認:
訂單支付:微信支付
訂單支付:支付寶支付
訂單列表:
以上是整個商城的所有頁面介紹,內容非常多,從頁面開發到交互最后都接口對接,一應俱全。
學完這個課程會有哪些收貨?
-
快速上手Vue全家桶開發電商系統
-
項目架構搭建
-
組件化、模塊化開發
-
ES6使用
-
Git、Nginx、調試、Mock、在線部署等綜合技能
-
前端性能優化
課程意外收貨:
我們在后期會免費為大家升級到Vue3.0,同時免費提供UI設計稿、前端性能優化和線上Nginx部署。
課程適合人群:
-
大學畢業生
-
1-4年的前端開發者
-
對前端有濃厚興趣的后端開發者,希望快速掌握前端開發