主要依賴

基于vue@2.0

使用vue-cli@2.0搭建項目框架

使用vue-router@2.1進行頁面路由切換

使用vue-resource@1.0.1進行http請求獲取數據

mock假數據存儲在本地

使用stylus編寫樣式

使用eslint進行js代碼的規范、

使用better-scroll進行聯動滑動

---

---

商品頁面

左側分類菜單和右側商品聯動是重點，使用better-scroll進行聯動滑動。

---

商品詳情頁面

---

評論頁面

---

商家頁面

---

遮罩層頁面

---

購物車浮層

項目用到的技術參考網站：

Stylus中文文檔 http://www.zhangxinxu.com/jq/stylus/ es6入門學習 http://es6.ruanyifeng.com/ eslint規則 http://eslint.org/docs/rules/ 設備像素比 http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/ Flex彈性布局 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 移動端1px邊框的實現 先給需要添加1像素邊框的元素設置一個1像素的偽類，然后根據手機屏幕的dpi大小對偽類進行相應的縮減，從而達到手機端1像素邊框的實現。 CSS Sticky footerCSS秘密花園:Sticky footers http://www.w3cplus.com/css3/css-secrets/sticky-footers.html better-scroll實現聯動 https://github.com/ustbhuangyi/better-scroll

---

---

項目在線體驗：https://chenyubo.me/vue-eleme-app/dist/index.html#/

總結

以上是生活随笔為你收集整理的框架中的左侧菜单关联右侧页面是如何实现的_前端基础学习：Vue2.0实现移动端外卖平台项目，参考旧版饿了么！...的全部內容，希望文章能夠幫你解決所遇到的問題。

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