基於 vue2 + vuex 構建一個具有 45 個頁面的大型單頁面應用


源碼地址:

https://github.com/bailicangdu/vue2-elm

技術棧

vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg

項目運行

注意:由於涉及大量的 ES6/7 等新屬性,nodejs 必須是 6.0 以上版本 ,node 7 是測試版,有可能會出問題,建議使用 node 6 穩定版 😱

git clone https://github.com/bailicangdu/vue2-elm.git   cd vue2-elm npm install 

編譯環境

npm run dev 訪問 http://localhost:8088

線上版本

npm run build 生成的elm文件夾放在服務器即可正常訪問

說明

本項目主要用於熟悉如何用 vue2 架構一個大型項目

如果對您有幫助,您可以點右上角 “Star” 支持一下 謝謝! ^_^

或者您可以 “follow” 一下,我會不斷開源更多的有趣的項目

開發環境 macOS 10.12.3 Chrome 55

特別感謝辰妹子,在百忙之中抽出時間和我一起完成了這個項目,辛苦了🌹

如有問題請直接在 Issues 中提,或者您發現問題並有非常好的解決方案,歡迎 PR 👍

推薦一個 react + redux 開源項目,對react感興趣的朋友趕緊去看看。地址在這里

另外一個 vue2 + vuex 的入門項目,比當前的項目簡單很多,非常適合入門練習。地址在這里

關於 demo 與 數據 的說明🤔

1、下載代碼運行后,因為開啟了反向代理,可以獲取真實的官方數據,最終可以進行下單(真實的下單,而不是模擬,下單后可以在官方App中查看並付款,親自試過,且成功付款點餐),但是為了安全起見,登陸的帳號為固定的帳號,以免泄露個人信息,不過照樣可以點餐。

2、demo的數據為模擬的固定數據,只做為效果演示,因為反向代理必須在PC端運行代碼才行。

效果演示

(demo使用的是模擬數據,數據是固定的,只做為樣式的演示,要獲取真實的數據,請clone代碼並運行);

查看demo請戳這里(請用chrome手機模式預覽)

移動端掃描下方二維碼

目標功能

  • [x] 定位功能 – 完成
  • [x] 選擇城市 – 完成
  • [x] 搜索地址 – 完成
  • [x] 展示所選地址附近商家列表 – 完成
  • [x] 搜索美食,餐館 – 完成
  • [x] 根據距離、銷量、評分、特色菜、配送方式等進行排序和篩選 – 完成
  • [x] 餐館食品列表頁 – 完成
  • [x] 購物車功能 – 完成
  • [x] 店鋪評價頁面 – 完成
  • [x] 單個食品詳情頁面 – 完成
  • [x] 商家詳情頁 – 完成
  • [x] 登陸、注冊 – 完成
  • [x] 修改密碼 – 完成
  • [x] 個人中心 – 完成
  • [x] 發送短信、語音驗證 – 完成
  • [x] 下單功能 – 完成 ✨✨🎉🎉
  • [x] 訂單列表 – 完成
  • [x] 訂單詳情 – 完成
  • [x] 下載App – 完成
  • [x] 添加、刪除、修改收貨地址 – 完成
  • [x] 帳戶信息 – 完成
  • [x] 服務中心 – 完成
  • [x] 紅包 – 完成
  • [x] 上傳頭像 – 完成 
    付款 – 臣妾做不到啊

總結


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM