項目預(yù)覽
線上訪問http://gettotally.com/yanxuan/#/
或者二維碼掃描:
項目描述
vue全家桶模仿網(wǎng)易嚴(yán)選瀏覽牺氨，購物流程叛复，好的生活，沒那么貴伞梯。
技術(shù)棧
前后端分離,CORS解決跨域
前臺
vue 前端頁面展示
vue-router spa
vuex 組件狀態(tài)共享
?axios 異步請求
?es6 js新一代規(guī)范
localStorage 個人信息的存儲汗菜，購物車的存儲
Eslint 代碼規(guī)范
?webpack build to dist
iview 部分引入
?后臺
?Node(Express) mock后臺數(shù)據(jù)
leancloud 托管express
實現(xiàn)的功能、
首頁
圖片輪播
swiper滑塊
cell行組件
商品grid塊組件
tabbar切換
推薦，居家， 餐廚商品縮略信息的請求和展示
?商品詳情
商品大圖滑動*?
參數(shù)，評論荒澡，名稱，詳情的請求展示*
?購買* 加入購物車
?專題
?頭部swiper滑塊
each-suggest 推薦組件
分類
復(fù)用与殃，改造首頁tabbar組件
請求每一分類數(shù)據(jù)* 過渡效果
?購物車
?登陸狀態(tài)的判斷
全選单山，非全選的切換
?購物車加入的過渡
滑動刪除
confirm框
下單形成訂單
?個人中心
grid 我的訂單
訂單的展示
先上線，后迭代未來每天都會更新功能幅疼，fix米奸。
2017-6-6:?
加入購物車，立即購買驗證是否登陸
更換分類頁面切換transition
其他tab頁面內(nèi)容暫時和居家餐廚相同
?總結(jié)
* 造出了滑動刪除的輪子爽篷。
* 對狀態(tài)管理有了進一步的了解,在項目過程中每一個組件都應(yīng)用了footer這個組件悴晰，切換的時候每次當(dāng)前選中的選項都是第一項成選中狀態(tài)，究其原因的他們的狀態(tài)沒有共享逐工。
* 對組件的抽離铡溪，書寫可復(fù)用的組件。
* pages管理頁面組件
* vuex狀態(tài)分模塊管理
* util工具的分離
* axios的封裝
廣告2018屆畢業(yè)生求職中
技術(shù)棧：Vue + js + html + css + nodejs+ mongoDB + 微信小程序
掌握html5泪喊，css3棕硫，js（es5，es6）熟練應(yīng)用bootstrap袒啼，weui哈扮，semantic-ui，jquery等框架進行開發(fā)蚓再；熟練掌握sass滑肉，stylus等CSS預(yù)處理器編寫vue+vuex+vue-router，對MVVM開發(fā)模式有一定的理解摘仅，后續(xù)還會學(xué)習(xí)react靶庙，PWA，weex等技術(shù)娃属；了解node.js六荒，mongodb相關(guān)知識，熟練應(yīng)用express框架開發(fā)膳犹；了解基本的數(shù)據(jù)結(jié)構(gòu)與算法恬吕；
電話：17607080585? ? ? ? 郵箱：1424254461@qq.com
目錄
```
|
|—— build
|—— config
|—— express/
| |—— app.js : 服務(wù)入口
| |—— routes/ : 后端路由.
| |—— ......
|
|——src : dev resources.
| |—— assets/
| | ?? |____style/ 樣式表
| | ?? | ?? |____reset.css
| |? ? |? ? |____others.css
| |—— components/
| | ?? |____ public/ 公共組件
| | ?? | ? ? |____ cell.vue 行
| | ?? | ? ? |____ header.vue 頭
| | ?? | ? ? |____ goTop.vue
| | ?? | ? ? |____ Footer.vue
| | ?? | ? ? |____ others.vue 其它
| |—— fetch/
| | ?? |____ api.js axios請求
| |—— pages/
| | ?? |____ index/ 公共組件
| | ?? | ? ? |____ others.vue vue組件
| | ?? |____ mylist/ 我的訂單
| | ?? | ? ? |____ others.vue vue組件
| | ?? |____ selfcenter/ 個人中心
| | ?? | ? ? |____ others.vue vue組件
| | ?? |____ shopcart/ 購物車
| | ?? | ? ? |____ others.vue vue組件
| | ?? |____ type/ 分類
| | ?? | ? ? |____ others.vue vue組件
| | ?? |____ other folder......
| | ?? | ? ? |____ others.vue vue組件
| |—— router/
| | ?? |____ index.js 路由映射
| |—— util/
| | ?? |____ common.js util/localstorage
| |—— store/
| | ?? |____ module/
| | ?? | ? ? |____ user.js 個人狀態(tài)管理
| | ?? | ? ? |____ order.js 訂單狀態(tài)管理
| | ?? | ? ? |____ footer.js.js 腳步菜單
| | ?? | ? ? |____ shopCart.js 購物車狀態(tài)
| | ?? |____ store.js mainjs
| | ?? |____ types.js typesz管理
| |—— App.vue :neteast-yanxuan SPA
| |__ main.js : the entry of douban-movieSPA
|
|__ static : static files
Build Setup
可修改配置axios.defaults.baseURL
clone express文件夾
npm i & npm run dev 啟動后端
前端部分:
?bash
# install dependenciesnpm install
# serve with hot reload at localhost:8080npm run dev
# build for production with minificationnpm run build
# build for production and view the bundle analyzer reportnpm run build --report```For detailed explanation on how things work, checkout the
