【備忘】Vue.js 2.5 + cube-ui 開發到部署e了嗎實戰

百度網盤


第1章 課程導學(二期)-15號開放

包括課程概述、核心模塊、核心技術、課程安排、課程收穫、講授方式、學習前提等方面的介紹,最後演示了整個外賣App的功能,讓同學們對課程項目有一個直觀的瞭解。


1-1 導學(必看)

第2章 項目準備工作(二期)-15號開放

包括項目需求分析、vue-cli 3.0 腳手架介紹、cube-ui 介紹、目錄模塊分析、api 接口 mock 等。


2-1 Vue-cli 3.0 介紹

2-2 目錄介紹 & cube-ui 安裝

2-3 api 接口 mock

第3章 頭部組件開發(二期)

包括 Header組件編寫,axios 封裝和數據交互、star 組件抽象封裝和 HeaderDetail 組件的編寫和交互。


3-1 目錄結構 & header 組件

3-2 axios 封裝 & 數據獲取

3-3 header-detail & star 組件

3-4 header-detail 交互

第4章 Tab 組件開發(二期)

包括 Tab 組件的基礎實現、上下聯動實現、組件更高維度的抽象和封裝。


4-1 tab 組件基礎實現

4-2 tab 組件上下聯動

4-3 tab 組件抽象和封裝

第5章 商品頁面開發(二期)

包括 ScrollNav 組件的應用、ShopCart 組件的開發、CartControl 組件開發、小球飛入動畫實現、側邊欄內容定製化、購物車列表組件實現和完善、sticky 組件實現、彈層類組件優化。


5-1 scroll-nav 組件應用

5-2 shop-cart 組件

5-3 cart-control 組件

5-4 小球飛入動畫實現

5-5 側邊欄內容定製化

5-6 購物車列表組件

5-7 購物車 sticky 組件

5-8 購物車列表功能完善

5-9 彈層類組件優化

第6章 商品詳情頁開發(二期)

包括詳情頁骨架開發、詳情頁購物能力開發、詳情頁評價列表開發、評價選擇組件開發。


6-1 商品詳情頁骨架開發

6-2 商品詳情頁購物開發

6-3 商品詳情頁評價列表開發

6-4 商品詳情頁評價選擇組件開發

第7章 評價和商家頁面開發(二期)

包括評價頁面骨架開發、評價選擇組件 Mixin 抽取、商家頁面靜態頁面開發、商家頁面本地緩存封裝和實現。


7-1 評價頁面骨架開發和數據獲取

7-2 評價頁面評價選擇組件 mixin 抽取

7-3 商家頁面靜態頁面開發

7-4 商家頁面本地緩存封裝實現

第8章 create-api 原理分析(二期)

包括create-api 原理介紹和源碼分析。


8-1 create-api 原理介紹

8-2 create-api 源碼分析(1)

8-3 create-api 源碼分析(2)

8-4 create-api 源碼分析(3)

8-5 create-api 源碼分析(4)

第9章 打包構建和項目部署(二期)

包括打包構建和性能優化、搭建小型 node 服務代理接口、部署到雲服務器和 nginx 多項目部署方案。


9-1 打包構建&性能優化

9-2 搭建小型 node 服務代理接口

9-3 部署到雲服務器

9-4 nginx 配置多項目部署方案

第10章 課程總結(二期)

總結課程的學習方法和以及學習收穫,制定進階的學習目標。


10-1 課程總結

第11章 課程簡介(一期)

介紹課程的學習目標和學習內容。


11-1 課程簡介

11-2 課程安排

第12章 Vuejs介紹(一期)

從前端開發趨勢分析開始,引入 MVVM 開發框架和 Vue.js,接着對比流行框架Angular 和 React,最後詳細介紹 Vue.js 的核心思想-數據驅動和組件化。


12-1 Vuejs介紹-近年來前端開發趨勢

12-2 Vuejs介紹-MVVM框架

12-3 Vuejs介紹-什麼是Vuejs及Vuejs生態

12-4 Vuejs介紹-對比Angular、React

12-5 Vuejs介紹-Vuejs核心思想

第13章 Vue-cli 開啓 Vuejs 項目(一期)

介紹 Vue 項目的腳手架,如何安裝,對腳手架生成的目錄文件做介紹,介紹 Vue 組件的編寫方法,最後運行 demo 項目並介紹 Webpack 構建腳本來說明 demo 的運行原理。


13-1 Vue-cli介紹

13-2 Vue-cli安裝

13-3 項目運行

13-4 項目文件介紹

13-5 webpack打包(上)

13-6 webpack打包(中)

13-7 webpack打包(下)

第14章 項目實戰-準備工作(一期)

分析外賣 APP 商家頁面的需求,準備圖片資源,利用 icon-moon 把 svg 製作成圖標字體,對代碼的目錄結構設計,最後 mock 測試數據。


14-1 需求分析

14-2 項目資源準備

14-3 圖標字體制作

14-4 項目目錄設計

14-5 mock數據(模擬後臺數據)

第15章 項目實戰-頁面骨架開發(一期)

設計頁面的骨架,拆分組件,商品、評論和商家詳情頁利用 Vue-router 做切換,最後還介紹了 flex 彈性佈局以及移動端 1 像素 border 實現的小技巧。


15-1 組件拆分(上)

15-2 組件拆分(中)

15-3 組件拆分(下)

15-4 Vue-router(上)

15-5 Vue-router(下)

15-6 1像素border實現

第16章 項目實戰-header組件開發(一期)

編寫 header 頭部組件,應用 Vue-resource 從服務端讀取數據,介紹如何在 Vue.js 中使用過渡動畫,如何編寫 css sticky footer 佈局,如何從需求中抽象出 star 星星組件。


16-1 Vue-resource應用(上)

16-2 Vue-resource應用(下)

16-3 外部組件(1)

16-4 外部組件(2)

16-5 外部組件(3)

16-6 外部組件(4)

16-7 外部組件(5)

16-8 外部組件(6)

16-9 詳情彈層頁(1)- 實現彈出層

16-10 詳情彈層頁(2)- CSS Sticky footer

16-11 詳情彈層頁(3)- star組件抽象(上)

16-12 詳情彈層頁(3)- star組件抽象(下)

16-13 詳情彈層頁(4)- star組件使用

16-14 詳情彈層頁(5)- 小標題自適應經典flex佈局實現

16-15 詳情彈層頁(6)- header剩餘組件實現(上)

16-16 詳情彈層頁(6)- header剩餘組件實現(下)

第17章 項目實戰-goods 商品列表頁開發(一期)

編寫 goods 商品組件,包括它的子組件 shopcart 購物車。介紹瞭如何在 Vue.js 應用第三方 JS 插件 better-scroll實現列表滾動,並配合 Vue.js 的計算屬性來實現左右列表的聯動。應用了自定義 Vue.js 過渡動畫實現了購物車的飛入動畫效果,介紹了在 Vue.js中父子組件如何通訊。...


17-1 佈局編寫

17-2 左側menu佈局

17-3 右側食品列表佈局(1)

17-4 右側食品列表佈局(2)

17-5 右側食品列表佈局(3)

17-6 better-scroll運用(1)

17-7 better-scroll運用(2)

17-8 better-scroll運用(3)

17-9 shopcart購物車組件(1)

17-10 shopcart購物車組件(2)

17-11 shopcart購物車組件(3)

17-12 shopcart購物車組件(4)

17-13 shopcart購物車組件(5)

17-14 shopcart購物車組件(6)

17-15 cartcontrol組件(1)

17-16 cartcontrol組件(2)

17-17 cartcontrol組件(3)

17-18 購物車小球動畫實現(1)

17-19 購物車小球動畫實現(2)

17-20 購物車小球動畫實現(3)

17-21 購物車詳情頁實現(1)

17-22 購物車詳情頁實現(2)

17-23 購物車詳情頁實現(3)

17-24 購物車詳情頁實現(4)

第18章 項目實戰-food 商品詳情頁實現(一期)

編寫 food 商品詳情頁組件,介紹了圖片佔位的技巧,並從需求中抽象出的 split 分隔組件和 ratingselect 評論組件,實現自定義過濾器 datefilter。


18-1 商品詳情頁實現(1)

18-2 商品詳情頁實現(2)

18-3 商品詳情頁實現(3)

18-4 商品詳情頁實現(4)

18-5 商品詳情頁實現(5)

18-6 split組件實現

18-7 ratingselect組件(1)

18-8 ratingselect組件(2)

18-9 ratingselect組件(3)

18-10 ratingselect組件(4)

18-11 ratingselect組件(5)

18-12 評價列表(1)

18-13 評價列表(2)

18-14 評價列表(3)

18-15 評價列表(4)

18-16 評價列表(5)

18-17 評價列表(6)

第19章 項目實戰-ratings評價列表頁實現(一期)

編寫 ratings 評價列表頁,感受在 Vue.js 中複用組件的好處,實現快速開發。


19-1 ratings組件開發-overview開發(1)

19-2 ratings組件開發-overview開發(2)

19-3 ratings組件開發-overview開發(3)

19-4 ratings組件開發-評價列表(1)

19-5 ratings組件開發-評價列表(2)

19-6 ratings組件開發-評價列表(3)

第20章 項目實戰-seller 商家詳情頁實現(一期)

編寫 seller 商家詳情頁,實現一套通用移動端數據存取方案,以及對項目做一些體驗上的優化。


20-1 seller組件開發-overview開發(1)

20-2 seller組件開發-overview開發(2)

20-3 seller組件開發-公告與活動開發(1)

20-4 seller組件開發-公告與活動開發(2)

20-5 seller組件開發-BScroll應用

20-6 seller組件開發-商家實景圖

20-7 seller組件開發-商家信息

20-8 seller組件開發-收藏商家(1)

20-9 seller組件開發-收藏商家(2)

20-10 seller組件開發-收藏商家

20-11 seller組件開發-體驗優化

第21章 項目實戰-項目編譯打包(一期)

上線前的最後一步,編譯打包Vue.js 項目。介紹了 webpack 編譯時的配置,如何利用node.js 開啓一個server本地調試。


21-1 webpack配置介紹

21-2 nodejs調試

第22章 課程總結(一期)

對課程做總結,並列出了課程所提到的主要知識點的鏈接,作爲課程的延伸學習。


22-1 課程總結

第23章 項目從 vue.js1.0 向 2.0 升級(一期)

本章節把項目從1.0向2.0升級向大家做了簡要的介紹。


23-1 1.0升級2.0 配置文件修改

23-2 1.0升級2.0 源碼修改(上)

23-3 1.0升級2.0 源碼修改(下)


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章