Vue仿今日頭條實例詳解

更新時間：2018年02月06日 08:43:59 投稿：laozhang

這篇文章主要介紹了Vue仿今日頭條實例詳解，并把相關(guān)代碼做了說明，對此有興趣的朋友參考下吧。

前言

vue也弄了一段時間了, 前段時間一直想用vue寫個移動端,加之年底也不是很忙,于是前幾天便著手開始弄了,到今天為止也算是勉強(qiáng)能看了

因為也是純粹的寫寫前端頁面,所以數(shù)據(jù)方面用的是mock.js,為了真實的模擬請求,可以直接在 Easy Mock 自己生成API
也可直接登陸我這項目的Easy Mock賬號密碼：

賬號: vue-toutiao
密碼： 123456

如果你想修改接口，請copy一份在修改

如果你想后臺接口也自己開發(fā)的話?？梢蚤喿x我這篇博客 Vue + Node + Mongodb 開發(fā)一個完整博客流程

技術(shù)棧：

vue + webpack + vuex + axios

結(jié)構(gòu)：

build: webpack配置
config: 項目配置參數(shù)
src
assets: 靜態(tài)資源文件，存放圖片啥的
components: 常用組件。例如彈窗等等。。。
directive: 常用指令封裝
router: 路由表
store: 狀態(tài)管理 vuex
styles: 樣式文件
utils: 常用工具類封裝
views: 視圖頁面
static: 靜態(tài)文件：存放 favicon.ico 等等
此項目用到了 DllPlugin 進(jìn)行打包處理，所有啟動該項目時記得，先執(zhí)行一次該腳本命令生成配置

效果演示：

幾個常用的知識點

1. 路由懶加載

{
  path: '/development',
  name: 'development',
  component: (resolve) => {
    require(['../views/development.vue'], resolve)
  }
}

或

const _import_ = file => () => import('views/' + file + '.vue')

{
  path: '/development',
  name: 'development',
  component: _import_('development')
}

2. 登陸攔截

通過路由的 beforeEach 鉤子函數(shù)來判斷是否需要登陸

// 如：系統(tǒng)設(shè)置需要登陸
{ 
  path: '/system', 
  name: '系統(tǒng)設(shè)置', 
  meta: { 
    login: true
  },
  component: _import_('System/index')
}

router.beforeEach((to, from, next) => {
  if (to.meta.login) { //判斷前往的界面是否需要登陸
    if (store.state.user.user.name) { // 是否已經(jīng)登陸
      next()
    }else{
      Vue.prototype.$alert('請先登錄!')
        .then( () => {
          store.state.user.isLogin = true
        })
    }
  }else{
    if (to.meta.page) store.state.app.pageLoading = true
    next() 
  }
  
})

3. 動畫切換

通過檢測設(shè)置在 Router上的animate屬性來判斷它做什么樣的切換動畫

Router.prototype.animate = 0

// 獲取每個路由meta上面的slide 來判斷它做什么動畫
{ 
  path: '/system', 
  name: '系統(tǒng)設(shè)置', 
  meta: { 
    slide: 1 
  },
  component: _import_('System/index')
}


watch: {
  $route (to, from) {
    /*
    0: 不做動畫
    1: 左切換
    2: 右切換
    3: 上切換
    4: 下切換
    ...
     */
    let animate = this.$router.animate || to.meta.slide
    if (!animate) {
      this.animate = '' 
    }else{
      this.animate = animate === 1 ? 'slide-left' :
        animate === 2 ? 'slide-right' :
        animate === 3 ? 'slide-top' :
        animate === 4 ? 'slide-bottom' : ''
    }
    this.$router.animate = 0
  }
}

4. 視頻播放

因為在IOS上無法隱藏video的controls ,所以我們可以隱藏video,通過繪制canvas來達(dá)到播放視頻的效果

5. icon采用的是阿里巴巴矢量圖

6. mock.js

7. Easy Mock

代碼實例：https://github.com/cd-dongzi/vue-project/tree/master/vue-toutiao