用vue2 +vue-router2 + es6 +webpack 高仿餓了麼app（乾貨滿滿）

vue-eleme

本項目是基於vue2最新實戰項目，vue2 +vue-router2 + es6 +webpack 高仿餓了麼app,是適合新手進階的絕佳教程。

首先

---

• 喜歡的請點心，關注，star ,fork,這些是我堅持下去的動力
• demo地址 demo （請用chrome的手機模式預覽）
  *本項目地址github地址
• 個人另一個vue開源項目 Meizi 用了vuex，和其餘比較火的包，纔剛剛上傳，代碼更加簡單，設計更加簡潔，註釋更加多！喜歡vue的朋友趕忙去看看。
• 手機掃一掃

1484297893.png

項目技術架構

---

• vue-cli
• vue
• vue-resource
• vue-router
• vue-infinite-scroll
• stylus
• webpack

上圖

---

• 加入購物車動畫

• 彈出購物車 商品詳情頁

• 分類切換 圖片左右滑動

安裝

---

項目地址：（git clone）

git clone https://github.com/liangxiaojuan/eleme.git

經過npm安裝本地服務第三方依賴模塊(須要已安裝Node.js)

npm install

啓動服務(http://localhost:8080)

npm run dev

發佈代碼

npm run build

安裝注意

安裝 vue-cli

npm install -g vue-cli

安裝 vue-cli eslint

npm install -g eslint

安裝依賴 friendly-errors-webpack-plugin

npm install friendly-errors-webpack-plugin --save-dev

目錄結構

---

├── build              // 構建服務和webpack配置
├── config             // 項目不一樣環境的配置
├── dist               // 項目build目錄
├── index.html         // 項目入口文件
├── package.json       // 項目配置文件
├── src                // 生產目錄
│   ├── assets         // 圖片資源
│   ├── common          // 公共的css js 資源
│   ├── components     // 各類組件
│   ├── App.vue         // 主頁面
│   └── main.js        // Webpack 預編譯入口

實現的功能

---

• 商品滾動 ，商品滾輪滾動
• 商品聯動
• 加入購物車，移除購物車
• 顯示評論 評論篩選
• 圖片左右滑動
• 商品詳情 父子組件的通訊
• 等等

正在實現的功能

---

• vuex
• 無限滾動
• 上拉刷新
• 更多更精彩的內容

最後

---

• 個人另一個vue開源項目 Meizi 用了vuex，和其餘比較火的包，纔剛剛上傳，代碼更加簡單，設計更加簡潔，註釋更加多！喜歡vue的朋友趕忙去看看。
• 若是喜歡必定要 star哈!!!（謝謝!!）
• 若是有意見和問題 請在 lssues提出，我會在線解答。