Vue學(xué)習(xí)有一段時(shí)間了，就想著用Vue來寫個(gè)項(xiàng)目練練手，弄了半個(gè)月，到今天為止也算勉強(qiáng)能看了。

創(chuàng)新互聯(lián)云計(jì)算的互聯(lián)網(wǎng)服務(wù)提供商,擁有超過13年的服務(wù)器租用、服務(wù)器主機(jī)托管、云服務(wù)器、虛擬空間、網(wǎng)站系統(tǒng)開發(fā)經(jīng)驗(yàn)，已先后獲得國家工業(yè)和信息化部頒發(fā)的互聯(lián)網(wǎng)數(shù)據(jù)中心業(yè)務(wù)許可證。專業(yè)提供云主機(jī)、虛擬空間、域名注冊(cè)、VPS主機(jī)、云服務(wù)器、香港云服務(wù)器、免備案服務(wù)器等。

由于不知道怎么拿手機(jī)App的接口，并且KFC電腦端官網(wǎng)真的...一言難盡，所以項(xiàng)目所有數(shù)據(jù)都是我截圖然后寫在EasyMock里的，有需要的同學(xué)可以自取

首頁 商品頁 外賣頁

技術(shù)棧

vue + webpack + vuex + axios

文件目錄

│ App.vue
│ main.js
│
├─assets
│   logo.png
│
├─components
│ │ cartcontrol.vue
│ │ code.vue
│ │ coupon.vue
│ │ mineHeader.vue
│ │ scroll.vue
│ │ shopHeader.vue
│ │ sidebar.vue
│ │ submitBar.vue
│ │ takeout.vue
│ │ wallet.vue
│ │
│ └─tabs
│     Other.vue
│     Outward.vue
│     Selfhelp.vue
│     Vgold.vue
│
├─pages
│ ├─home
│ │   home.vue
│ │
│ ├─mine
│ │   mine.vue
│ │
│ ├─order
│ │   order.vue
│ │
│ └─shop
│     shop.vue
│
├─router
│   index.js
│
└─vuex
  │ store.js
  │ types.js
  │
  └─modules
      com.js
      cou.js
      take.js

效果展示

定義的組件

better-scroll

因?yàn)槊總€(gè)頁面都需要滑動(dòng)，所以一開始就把scroll組件封裝好，之后使用的話引入一下就行了

slot 插槽是一塊模板，顯示不顯示，以及怎樣顯示由父組件來決定， 也就是把你想要滑動(dòng)的區(qū)域插進(jìn)去，剩下的內(nèi)容都是官方文檔定義好的，復(fù)制一遍就好了

固定頭部

頭部相對(duì)頁面是固定的，這里我把頭部都封裝成了組件，在主頁面引入頭部，要滑動(dòng)的部分放入上面定義好的scroll組件即可

側(cè)邊欄以及彈出框

起初我的想法是用router-link直接跳轉(zhuǎn)，然后發(fā)現(xiàn)這樣做頁面會(huì)自帶導(dǎo)航欄，于是我決定通過CSS動(dòng)態(tài)綁定來實(shí)現(xiàn)它

樣式用的是Vant UI組件，最外面綁定了一個(gè)動(dòng)態(tài)樣式showbar，然后把整體的初始位置設(shè)在屏幕之外，當(dāng)傳入?yún)?shù)為true時(shí)再回來，用Vuex管理它的狀態(tài)

.sidebar-con {
 position: absolute;
 top: 0;
 left: -400px;
 transform: translateZ(0);
 opacity: 0;
 width: 100%;
 z-index: 1002;
 height: 100%;
 overflow: auto;
 transition: all 0.3s ease;
}
.showbar {
 transform: translateX(400px);
 opacity: 1;
}

Vuex狀態(tài)管理

const state = {
 showSidebar: false
}
const mutations = {
 [types.COM_SHOW_SIDE_BAR] (state, status) {
  state.showSidebar = status
 }
}
const actions = {
 setShowSidebar ({commit}, status) {
  commit(types.COM_SHOW_SIDE_BAR, status)
 }
}
const getters = {
 showSidebar: state => state.showSidebar
}

用mapGetter拿到對(duì)象，然后傳給computed屬性，對(duì)象可以直接使用

computed: {
  ...mapGetters([
   'showSidebar'
  ])
 },

當(dāng)需要顯示的時(shí)候使用dispatch將參數(shù)傳入 this.$store.dispatch('setShowSidebar', true)

整體代碼

外賣點(diǎn)餐

這里參考的是慕課網(wǎng)黃奕大大的課程，課程地址

商品展示

這里通過currentIndex和index做對(duì)比，來確認(rèn)是否添加current類，通過添加current類來實(shí)現(xiàn)當(dāng)前頁面的區(qū)域的樣式變化，他們之間的對(duì)比關(guān)系也就是menu區(qū)域和foods區(qū)域的顯示區(qū)域的對(duì)比關(guān)系

需要注意的是vue傳遞原生事件使用$event

購物車

購物車列表的顯示和隱藏以及清空按鈕是通過數(shù)據(jù)fold來決定的，購物車列表是通過計(jì)算屬性listshow來實(shí)現(xiàn)，清空按鈕也是通過設(shè)置count屬性來實(shí)現(xiàn)，這樣都達(dá)到了不用操作dom就可以改變dom行為的效果。

操作按鈕

這個(gè)模塊主要通過三個(gè)小模塊實(shí)現(xiàn),刪除按鈕,顯示數(shù)量塊,增加按鈕

addCart以及decreaseCart方法，默認(rèn)會(huì)傳入event原生dom事件，food數(shù)據(jù)是從父組件傳入的，所以對(duì)這個(gè)數(shù)據(jù)的修改，也能夠反應(yīng)到父組件，也因?yàn)橘徫镘嚨臄?shù)據(jù)也是從父組件傳入的，使用同一個(gè)food數(shù)據(jù)，從而關(guān)聯(lián)到購物車的購買數(shù)量統(tǒng)計(jì)。

異步問題

  

   

   
{{item[0].name}}
   

  
  

   

    
   
   

     

      

        
      
     
    
   
  

這里循環(huán)嵌套，整個(gè)DOM結(jié)構(gòu)都是循環(huán)出來的，而better-scroll需要操作DOM結(jié)構(gòu)，要實(shí)現(xiàn)橫向滑動(dòng)效果，難免會(huì)有異步問題。

可是無論我使用.then或者$nextTick都無法掛載better-scroll，查閱了大量文檔也無法解決，最后只能使用原生的overflow-X，若是有解決辦法，歡迎提出，感激不盡!

結(jié)語

總的來說這個(gè)項(xiàng)目還有很多不足，實(shí)現(xiàn)的功能也很少，后續(xù)我會(huì)繼續(xù)改進(jìn)。

如果這篇文章對(duì)你有幫助，不妨點(diǎn)個(gè)贊吧！

GitHub地址

總結(jié)

以上所述是小編給大家介紹的Vue實(shí)戰(zhàn)教程之仿肯德基宅急送App,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！