摘要：全家桶仿騰訊體育一年一度的總決賽，相信球迷用的最多的就是騰訊體育這款，剛好上手，當(dāng)練手就把這個(gè)仿下來。這樣剛進(jìn)去的時(shí)候頁面加載時(shí)間明顯減短?？梢园我猱惒讲僮?。

一年一度的NBA總決賽，相信球迷用的最多的就是騰訊體育這款A(yù)PP，剛好上手Vue，當(dāng)練手就把這個(gè)APP仿下來。

?在線預(yù)覽：點(diǎn)我！??！在線預(yù)覽，手機(jī)瀏覽或切換瀏覽器移動(dòng)調(diào)試

?源碼地址：Github??求你的小星星～

前端部分

SPA單頁應(yīng)用，前后端分離，webpack build to dist

移動(dòng)設(shè)備兼容：使用flexible.js和rem處理兼容問題

路由懶加載：Vue Router 處理路由，結(jié)合 Vue 的 異步組件 和 Webpack 的 code splitting feature 實(shí)現(xiàn)路由懶加載

axios做ajax請(qǐng)求

使用了 Vuex 管理組件間的狀態(tài)，實(shí)現(xiàn)非父子組件之間的通信

使用 Vue-draggable實(shí)現(xiàn)移動(dòng)端拖拽排序

mint-UI完成構(gòu)建圖片懶加載、下拉刷新、infinite-scroll等組件

大圖片、輪播圖通過 sessionStorage 存儲(chǔ)

后端部分

mock模擬數(shù)據(jù)

express 做靜態(tài)資源目錄

待更新的功能

處理數(shù)據(jù)相關(guān)性，讓圈子組件和文章組件對(duì)應(yīng)顯示

改用 express 拋接口

用 express + mongodb 保存用戶狀態(tài)

使用了Vue的異步組件和Webpack的code splitting feature實(shí)現(xiàn)路由組件的懶加載當(dāng)打包構(gòu)建應(yīng)用時(shí)，Javascript包會(huì)變得非常大，影響頁面加載。如果我們能把不同路由對(duì)應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對(duì)應(yīng)組件，這樣就更加高效了。這樣剛進(jìn)去的時(shí)候頁面加載時(shí)間明顯減短。

routes: [
    {
      path: "/article-video/:id",
      component: resolve => require(["@/page/article/article-video"], resolve)
    },
    {
      path: "/article/:id",
      component: resolve => require(["@/page/article/article"], resolve)
    },
    {
      path: "/",
      name: "Index",
      component: resolve => require(["@/page/index.vue"], resolve),
      redirect: "/competition/recommend",
      children: [{
        path: "/competition",
        name: "competition",
        component: resolve => require(["@/page/home/competition"], resolve),
        children: [{
          path: "/competition/recommend",
          name: "recommend",
          component: resolve => require(["@/components/tunnels/recommend"], resolve)
        }, {
          path: "/competition/video",
          name: "video",
          component: resolve => require(["@/components/tunnels/video"], resolve)
        }, {
          path: "/competition/nba",
          name: "nba",
          component: resolve => require(["@/components/tunnels/nba"], resolve),
        }]
      }, {
        path: "/community",
        name: "community",
        component: resolve => require(["@/page/home/community"], resolve),
        children: [{
          path: "/community/hotpost",
          name: "hotpost",
          component: resolve => require(["@/components/community/hotpost"], resolve)
        }, {
          path: "/community/mycircle",
          name: "mycircle",
          component: resolve => require(["@/components/community/mycircle"], resolve)
        }, {
          path: "/community/activies",
          name: "activies",
          component: resolve => require(["@/components/community/activies"], resolve)
        }, {
          path: "/community/all",
          name: "communityall",
          component: resolve => require(["@/components/community/all"], resolve)
        }, {
          path: "/community/article/:id",
          component: resolve => require(["@/page/article/article"], resolve),
          redirect: "/article/:id"
        }]
      }, {
        path: "/agenda",
        name: "agenda",
        component: resolve => require(["@/page/home/agenda"], resolve),
        children: [{
          path: "/agenda/focus",
          name: "focus",
          component: resolve => require(["@/components/agenda/focus"], resolve)
        }, {
          path: "/agenda/all",
          name: "agendaall",
          component: resolve => require(["@/components/agenda/all"], resolve)
        }, {
          path: "/agenda/popular",
          name: "popular",
          component: resolve => require(["@/components/agenda/popular"], resolve)
        }]
      }, {
        path: "/mine",
        name: "Mine",
        component: resolve => require(["@/page/home/mine"], resolve),
        redirect: "/mine/index",
        children: [{
          path: "/mine/index",
          component: resolve => require(["@/components/mine/index"], resolve)
        }]
      }]
    }
  ]

眾所皆知，h5原生的drag事件對(duì)移動(dòng)端是無效的，因此，移動(dòng)端的拖拽實(shí)現(xiàn)，依賴于touchstart、touchend和scroll的坐標(biāo)計(jì)算，實(shí)現(xiàn)起來非常麻煩，Vue-draggable可以讓我們輕松實(shí)現(xiàn)跟PC端效果一樣的拖拽排序。

?文檔地址：https://github.com/SortableJS...
特性Full support of Sortable.js features:

Supports touch devices
Supports drag handles and selectable text
Smart auto-scrolling
Support drag and drop between different lists
No jQuery dependency
Keeps in sync HTML and view model list
Compatible with Vue.js 2.0 transition-group
Cancellation support
Events reporting any changes when full control is needed

安裝依賴

npm install vuedraggable --save

構(gòu)造拖拽區(qū)域

需要注意：Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態(tài)。

Action 可以包含任意異步操作。

頻道訂閱的狀態(tài)改變對(duì)應(yīng)路由的變化

圈子訂閱的狀態(tài)改變對(duì)應(yīng)訂閱列表的雙向顯示

// 未定制增加
export const ADD_NOSUBSCRIBED = "ADD_NOSUBSCRIBED"
// 未定制減少
export const DELETE_NOSUBSCRIBED = "DELETE_NOSUBSCRIBED"
// 定制增加
export const ADD_SUBSCRIBED = "ADD_SUBSCRIBED"
// 定制減少
export const DELETE_SUBSCRIBED = "DELETE_SUBSCRIBED"
// 更新頁面和數(shù)據(jù)
export const UPDATE_ALL = "UPDATE_ALL"
// 社團(tuán)增加
export const ADD_CLUB = "ADD_CLUB"
// 社團(tuán)減少
export const DELETE_CLUB = "DELETE_CLUB"

import * as types from "./mutation_types"

export default {
  // 添加社團(tuán)
  [types.ADD_CLUB] (state, obj) {
    if(!state.clubs.includes(obj)) state.clubs.push(obj)
    return
  },
  // 刪除社團(tuán)
  [types.DELETE_CLUB] (state, obj) {
    let oIndex = state.clubs.findIndex((item) => {
      return item.name == obj.name
    })
    state.clubs.splice(oIndex, 1)
  },
  // 添加未訂閱
  [types.ADD_NOSUBSCRIBED] (state, index) {
    console.log(index)
  },
  // 刪除未訂閱
  [types.DELETE_NOSUBSCRIBED] (state, index) {
    console.log(index)
  },
  // 添加訂閱
  [types.ADD_SUBSCRIBED] (state, index) {
    console.log(index)
    let temp = state.noSubscribed[index]
    state.noSubscribed.splice(index, 1)
    state.subscribed.push(temp)
    state.routes[0].push(temp)
  },
   // 刪除訂閱
  [types.DELETE_SUBSCRIBED] (state, index) {
    // console.log(index)
    let oIndex = parseInt(index) + 2
    let temp = state.subscribed[index]
    state.subscribed.splice(index, 1)
    state.routes[0].splice(oIndex, 1)
    // console.log(state.noSubscribed)
    state.noSubscribed.push(temp)
  },
  // 用數(shù)據(jù)塊更新
  [types.UPDATE_ALL] (state, obj) {
    // console.log(obj)
    // console.log(obj.temp_NoSubscribedArr)
    // console.log(obj.temp_subscribedArr)
    state.subscribed = obj.temp_subscribedArr
    state.noSubscribed = obj.temp_NoSubscribedArr
    // console.log(state.subscribed)
    // console.log(state.noSubscribed)
    state.routes[0] = [{
      name: "推薦",
      url: "/competition/recommend"
    }, {
      name: "視頻",
      url: "/competition/video"
    }]
    // console.log(state.subscribed)
    state.subscribed.map(item => {
      // console.log(item)
      // console.log(state.routes[0])
      state.routes[0].push(item)
    })
    // console.log(state.routes[0])
  }
}

import * as types from "./mutation_types"
export default {
  // 未定制增加
  add_nosubscribed: ({ commit }, index) => {
    commit(types.ADD_NOSUBSCRIBED, index)
  },
  // 未定制減少
  delete_nosubscribed: ({ commit }, index) => {
    commit(types.DELETE_NOSUBSCRIBED, index)
  },
  // 定制增加
  add_subscribed: ({ commit }, index) => {
    commit(types.ADD_SUBSCRIBED, index)
  },
  // 定制減少
  delete_subscribed: ({ commit }, index) => {
    commit(types.DELETE_SUBSCRIBED, index)
  },
  // 更新頁面和數(shù)據(jù)
  update_all: ({ commit }, obj) => {
    commit(types.UPDATE_ALL, obj)
  },
  // 社團(tuán)增加
  add_club: ({ commit }, obj) => {
    commit(types.ADD_CLUB, obj)
  },
  // 社團(tuán)減少
  delete_club: ({ commit }, obj) => {
    commit(types.DELETE_CLUB, obj)
  },
}