好的生活，聚集美麗，成人之美！從現在做起！http://www.tuicool.com/articles/EBbmAjr

效果預覽

PS：google瀏覽器在切換不同的手機測試，需要重新重新整理頁面；安卓手機可能不適應

:point_right:原始碼地址： Github在這裡

專案描述

技術棧

Vue2.0全家桶 + axios + Vuex + Mint-Ui + Mock.js + Stylus

前端部分

• Vue2.0 前端頁面的展示
• SPA單頁應用，前端後分離
• Stylus css預編譯
• Axios 非同步資料的請求
• localStorage 個人資訊以及購物車資訊的儲存
• ES6 Js語言的標準
• Mint_UI 實現圖片輪播，圖片懶載入等等
• Better-Scroll 實現移動端滾動，讓滾動更加協調
• flexible.js和rem，解決移動端裝置相容

後端部分

• Mock.js 實現後端資料的託管

待更新的功能

• 後端平臺搭建，利用新一代的Koa伺服器框架
• 訂單頁面的展示
• 商家頁面的請求
• 下拉，載入更多的商品資料

實現功能

首頁

• 1、tabbar切換
• 2、優惠商品倒計時
• 3、活動的商品的推薦
• 4、swiper滑動，切換頁面
• 5、搜尋框
• 6、首頁不同頁面的展示

  商品詳情

• 1、商品圖片放大顯示
• 2、商品具體的顯示、評論、圖片展示
• 3、加入購車車頁面彈窗，選擇商品的種類，以及數量
• 4、商品加入購物車，動畫

  購物車

• 1、登入狀態判斷
• 2、全選，以及非全選的切換
• 3、新增商品、以及減少與刪除

個人

• 1、賬戶的登入
• 2、註冊賬戶
• 3、設定頁面

總結

• 1、熟悉使用Vue2.0
• 2、在專案中，將元件進行分離，編寫可以複用的元件，提高效率
• 3、Vuex的狀態管理模組，統一的狀態的管理，讓我們更好的去對資料操作
• 4、util的工具，倒計時js
• 5、對axios有更進一步的理解，利用cros進行跨域處理
• 6、進行路由的懶載入，優化頁面載入

具體功能實現

路由結構

export default new Router({
  routes: [
    { //這裡要設定一個預設的主頁面 後面才起作用 /代表根目錄
      path: '/',
      name: 'index'
 
,
      component: resolve => require(['@/pages/index/index'], resolve),
      redirect: '/index/page1'
    },
    { 
      path: '/index',
      component: resolve => require(['@/pages/index/index'], resolve),
      meta: {keepAlive: true},
      children: [
        {
          path: '',
          component: resolve => require(['@/pages/index/index'], resolve)
        },
        {
          path: 'page1', 
          name: 'page1',
          component: resolve => require(['@/pages/index/page1'], resolve)
        },
        {
          path: 'page2',
          name: 'page2',
          component: resolve => require(['@/pages/index/page2'], resolve)
        },
        {
          path: 'page3',
          name: 'page3',
          component: resolve => require(['@/pages/index/page3'], resolve)
        },
        {
          path: 'page4',
          name: 'page4',
          component: resolve => require(['@/pages/index/page4'], resolve)
        },
        {
          path: 'page5',
          name: 'page5',
          component: resolve => require(['@/pages/index/page5'], resolve)
        },
        {
          path: 'page6',
          name: 'page6',
          component: resolve => require(['@/pages/index/page6'], resolve)
        },
        {
          path: 'page7',
          component: resolve => require(['@/pages/index/page7'], resolve)
        },
      ]
    },
    {
      path: '/brandsale',
      name: 'brandSale', 
      component: resolve => require(['@/pages/brandsale/index'], resolve)
    },
    {
      path: '/livecommunity',
      name: 'liveCommunity',
      component:  resolve => require(['@/pages/livecommunity/index'], resolve)
    },
    {
      path: '/shopcart',
      name: 'shopCart',
      component:  resolve => require(['@/pages/shopCart/index'], resolve)
    },
    {
      path: '/myself',
      name: 'mySelf',
      component: resolve => require(['@/pages/mySelf/index'], resolve)
    },
    {
      path: "/setter",
      name: 'setter',
      component:  resolve => require(['@/pages/mySelf/setter'], resolve)
    },
    {
      path: '/login',
      name: 'login',
      component:  resolve => require(['@/pages/mySelf/login'], resolve)
    },
    {
      path: '/product',
      name: 'product',
      component:  resolve => require(['@/pages/product/index'], resolve),
      redirect: '/product/info', 
      children: [
        {
          path: 'info',
          name: 'productInfo',
          component: resolve => require(['@/pages/product/info'], resolve)
        },
        {
          path: 'detail',
          name: 'productDetail',
          component: resolve => require(['@/pages/product/detail'], resolve)
        },
        {
          path: 'comment',
          name: 'productComment',
          component: resolve => require(['@/pages/product/comment'], resolve)
        }
      ]
    },

  ]
})

Vuex狀態管理

這裡我貼出購物車模組。它的使用場景：新增商品到購物車，更新商品的資訊、進行增刪，並且在操作過程中，將資料儲存到

localStorage，持久儲存，由於後臺伺服器尚未搭建，利用這樣來保持資料的儲存。

import * as types from '../mutation-types.js'
const storage = window.localStorage
const state = {
  added: [],
  checkoutStatus: null
}
const getters = {
  checkoutStatus: state => state.checkoutStatus,
  cartLists: state => state.added
}
const mutations = {
  [types.ADD_TO_CART] (state, product) {
    let id = product.id
    const record = state.added.find(p => p.id === id && p.type === product.type)
    // 解決方法一 找到資料遍歷一次
    // 方法二 是獲取到父級的資料
    if (!record) {
      state.added.push(product)
    } else {
      record.quantity += product.quantity
    }
    storage.setItem('cart', JSON.stringify(state.added))
  },
  //傳入商品的資訊 product  id和型別判斷當前儲存的商品       要修改的數量
  // 更新產品的資料
  [types.UPDATE_THIS_PRODUCT] (state, product) {
    let {id,type,quantity} = product //物件的解構
    const record = state.added.find(p => p.id===id &&p.type===type)
    if (quantity>0) {
      record?record.quantity = quantity : ''
    } else {
      // 傳入的商品數量為0 就刪除這個商品 刪除指定的序號的商品
      let index = state.added.indexOf(record)
      state.added.splice(index,1)
    }
    storage.setItem('cart', JSON.stringify(state.added))   
  },  
}
export default {
  state,
  getters,
  mutations
}

來個廣告，拍賣自己！！！

• :point_right:jerrylee： 感興趣請點我，這是我的簡歷
• :point_right:微訊號：JerryLeelisa
• :point_right:電 話：15279106115
• :point_right:郵 箱：[email protected]

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout theguide anddocs for vue-loader.