vue2-elm基于 vue2 + vuex 的大型單頁面應(yīng)用
vue2-elm
基于 vue2 + vuex 構(gòu)建一個(gè)具有 45 個(gè)頁面的大型單頁面應(yīng)用。
前言
初學(xué)vue時(shí)曾在網(wǎng)上搜索vue的實(shí)戰(zhàn)項(xiàng)目源碼，無奈大部分都是簡(jiǎn)單的demo，對(duì)于深究vue沒有太大的幫助，剩下的一些大部分都是像音樂播放器之類的展示型項(xiàng)目，交互沒有預(yù)期那么復(fù)雜。但我們實(shí)際在工作中，經(jīng)常會(huì)遇到有購物車的項(xiàng)目，這類項(xiàng)目因?yàn)樯婕暗絤oney，所以對(duì)邏輯嚴(yán)謹(jǐn)度要求高，頁面之間交互復(fù)雜，又會(huì)伴隨著登錄、注冊(cè)、用戶信息等等，常常會(huì)讓我們很頭疼。既然還沒人用vue寫過這樣的項(xiàng)目，那不如我來寫，開源出來對(duì)能看到的人也會(huì)有幫助。
這種功能性的項(xiàng)目很實(shí)用但是往往也很枯燥，沒有音樂播放器那么看起來絢麗，思來想去發(fā)現(xiàn)餓了么是一個(gè)不錯(cuò)的素材，一來它足夠復(fù)雜，開放的外賣平臺(tái)比一般的公司獨(dú)有商店更加復(fù)雜。二來 見到那么多美食，大家也不會(huì)感覺到厭煩。
為啥是餓了么，而不是百度，美團(tuán)？原因很簡(jiǎn)單，三個(gè)外賣大佬里，餓了么的色調(diào)和布局是最漂亮的，看起來最舒服。
此項(xiàng)目大大小小共 45 個(gè)頁面，涉及注冊(cè)、登錄、商品展示、購物車、下單等等，是一個(gè)完整的流程。一般公司即便是官網(wǎng)的單頁面項(xiàng)目都沒這么復(fù)雜，如果這個(gè)項(xiàng)目能駕馭的了，相信大部分公司的其他單頁面應(yīng)用也就不在話下，即便更復(fù)雜，也不會(huì)比這個(gè)高到哪里去。
因?yàn)槔脴I(yè)余時(shí)間來做，年前就開始寫，又跨個(gè)年，周期有點(diǎn)長(zhǎng)，項(xiàng)目從零布局到完成共用了2個(gè)多月的時(shí)間，目前項(xiàng)目已經(jīng)完成，正在進(jìn)行一些性能的優(yōu)化，增加詳細(xì)的注釋。
另外，這個(gè)項(xiàng)目和慕課網(wǎng)視頻的那個(gè)餓了么沒有任何關(guān)系，慕課網(wǎng)的項(xiàng)目只有一個(gè)頁面，我在看完vue的官方文檔后直接寫了這個(gè)項(xiàng)目，沒有參照任何人的代碼，請(qǐng)大家不要混為一談。
注：此項(xiàng)目純屬個(gè)人瞎搞，正常下單請(qǐng)選擇餓了么官方客戶端。
技術(shù)棧
vue2 + vuex + vue-router + webpack + ES6/7 + fetch + sass + flex + svg
項(xiàng)目運(yùn)行
注意：由于涉及大量的 ES6/7 等新屬性，nodejs 必須是 6.0 以上版本 ，node 7 是先行版，有可能會(huì)出問題，建議使用 node 6 穩(wěn)定版
git clone https://github.com/bailicangdu/vue2-elm.git cd vue2-elm npm install npm run dev (訪問線上后臺(tái)系統(tǒng)) npm run local (訪問本地后臺(tái)系統(tǒng)，需運(yùn)行node-elm后臺(tái)系統(tǒng))
目標(biāo)功能
定位功能 -- 完成
選擇城市 -- 完成
搜索地址 -- 完成
展示所選地址附近商家列表 -- 完成
搜索美食，餐館 -- 完成
根據(jù)距離、銷量、評(píng)分、特色菜、配送方式等進(jìn)行排序和篩選 -- 完成
餐館食品列表頁 -- 完成
購物車功能 -- 完成
店鋪評(píng)價(jià)頁面 -- 完成
單個(gè)食品詳情頁面 -- 完成
商家詳情頁 -- 完成
登錄、注冊(cè) -- 完成
修改密碼 -- 完成
個(gè)人中心 -- 完成
發(fā)送短信、語音驗(yàn)證 -- 完成
下單功能 -- 完成
訂單列表 -- 完成
訂單詳情 -- 完成
下載App -- 完成
添加、刪除、修改收貨地址 -- 完成
帳戶信息 -- 完成
服務(wù)中心 -- 完成
紅包 -- 完成
上傳頭像 -- 完成
付款 -- 臣妾做不到啊~~
部分截圖
