（ 效果圖 ）

講師介紹?

大家好，我是米斯特吳，多年前后端開發經驗，就職于國內一線互聯網公司，專家工程師(對標百度t7、阿里p8) 。在騰訊課堂中擁有大量前后端課程, 學員粉絲超過3萬人, 跟米斯特吳學習編寫高質量且可擴展的代碼，提升通用性強的代碼能力。?

目前已經上線的課程包含Vue.js / Angular4 / Node.js / React.js / ES6等相關課程, 每個課程都是騰訊課堂銷量最高的課程, 無論是免費課程, 還是收費課程, 都得到各位朋友的高度認可,也非常期待你能夠參與我們的課程。

我希望我的付出，可以得到更多人的認可，可以幫助到更多人。

項目介紹

通過高仿《美團外賣》APP學會Vuejs2.x的實際使用，使用Vue.js+webpack+axios+betterScroll等前端最新最熱的技術，采用組件化、模塊化的開發方式，讓你用更少的代碼做更快速的開發。提取外賣App最核心的商家模塊（包括商品、評論、商家介紹等各模塊），完全高仿《美團外賣》外賣APP，讓你更能領略Vue.js組件化的魅力。

以外賣App商家頁為主線，引出開發所涉及的各種相關知識點，讓同學們了解一個項目從0到1的整個過程，干貨滿滿。

為了讓你更容易在工作中實際運用Vue.js，講師以上線代碼的標準寫代碼，讓你切實感受到什么是擴展性、通用性強的優質代碼。

有什么要求？

有一定前端HTML、CSS、JavaScript基礎知識。

有一定Vuejs基礎。

具有一定自學能力，相當于有一年左右前端開發經驗或用過其它前端框架進行過項目開發。

我將從這門課程中學到什么？

了解一個真實項目完整的開發流程

學會組件化、模塊化的開發模式

掌握使用Vue-cli腳手架初始化Vuejs項目

了解webpack配置及打包原理

學會模擬json后端數據，前后端分離開發

學會使用vue-router開發單頁應用

學會使用Axios與后端數據交互

學會如何在Vuejs框架里和第三方JS插件

交互學會制作并使用圖標字

學會如何真機調試學會flex彈性布局

目標受眾是誰？

想要了解Vuejs實際項目中的應用

想要了解Vuejs如何進行APP開發的

想要知道如何使用Vuejs進行單頁面開發

想要知道項目是如何從0~1，如何從無到有的

想要知道真實一線公司如何開發項目的以及項目開發流程的

該如何編寫易維護，便于擴展，通用性強的代碼

項目涉及到技術棧:?

vue全家桶：Vue、Vue-router、Vue-cli等?

組件化：單Vue文件?

模塊化：ES6 Module?

第三方模塊：better-scroll axios等?

基礎開發環境和包管理：Node、npm?

構建工具：webpack?

編輯器：vscode

項目主要功能?

點餐頁面

點選商品后自動添加到購物車，并計算好總價，在商品列表、購物車列表和商品詳情頁都可以隨意增減數目，此外左側商品分類和右側的商品相互關聯，通過better-scroll插件滑動商品列表時，相應的商品分類也會跟著跳轉。

用戶評價頁面

主要包括一個TAB欄，包括三部分：全部、有圖和評價三個模塊。

商家信息頁面

主要介紹一些商家基本信息，可以通過better-scroll插 件，進行左右滑動圖片。

項目難點?

該項目業務邏輯主要集中在點餐模塊，而點餐模塊中難點便是如何實現商品列表滑動，以及右側商品分類和左側商品列表如何聯動？?

首先要實現商品列表的滑動，就需要用到一個better-scroll插件，better-scroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。

項目總結?

vue數據和視圖的分離,以數據驅動視圖，只關心數據變化，DOM操作被封裝，在實際開發過程中大大提高了效率。

總結

以上是生活随笔為你收集整理的使用Vue2.x高效还原美团外卖项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。