快捷導(dǎo)航

Vue仿今日頭條實(shí)例詳解

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

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

前言

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

因?yàn)橐彩羌兇獾膶?xiě)寫(xiě)前端頁(yè)面,所以數(shù)據(jù)方面用的是mock.js,為了真實(shí)的模擬請(qǐng)求,可以直接在 Easy Mock 自己生成API
也可直接登陸我這項(xiàng)目的Easy Mock賬號(hào)密碼：

賬號(hào): vue-toutiao
密碼： 123456

如果你想修改接口，請(qǐng)copy一份在修改

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

技術(shù)棧：

vue + webpack + vuex + axios

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

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

效果演示：

幾個(gè)常用的知識(shí)點(diǎn)

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. 登陸攔截

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

// 如：系統(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('請(qǐng)先登錄!')
        .then( () => {
          store.state.user.isLogin = true
        })
    }
  }else{
    if (to.meta.page) store.state.app.pageLoading = true
    next() 
  }
  
})

3. 動(dòng)畫(huà)切換

通過(guò)檢測(cè)設(shè)置在 Router上的animate屬性來(lái)判斷它做什么樣的切換動(dòng)畫(huà)

Router.prototype.animate = 0

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


watch: {
  $route (to, from) {
    /*
    0: 不做動(dòng)畫(huà)
    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. 視頻播放

因?yàn)樵贗OS上無(wú)法隱藏video的controls ,所以我們可以隱藏video,通過(guò)繪制canvas來(lái)達(dá)到播放視頻的效果

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

6. mock.js

7. Easy Mock

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