快捷導(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ā)的話。可以閱讀我這篇博客 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: 常用工具類封裝
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

相關(guān)文章

利用vue3仿蘋果系統(tǒng)側(cè)邊消息提示效果實(shí)例
這篇文章主要給大家介紹了關(guān)于如何利用vue3仿蘋果系統(tǒng)側(cè)邊消息提示效果的相關(guān)資料,文中通過(guò)實(shí)例代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-12-12
vue利用全局導(dǎo)航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁(yè)面的實(shí)例代碼
這篇文章主要介紹了vue利用全局導(dǎo)航守衛(wèi)作登錄后跳轉(zhuǎn)到未登錄前指定頁(yè)面,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-05-05
詳解Vue的異步更新實(shí)現(xiàn)原理
這篇文章主要介紹了Vue的異步更新實(shí)現(xiàn)原理，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下
2020-12-12
vue搭建本地JSON靜態(tài)數(shù)據(jù)服務(wù)器全過(guò)程
這篇文章主要介紹了vue搭建本地JSON靜態(tài)數(shù)據(jù)服務(wù)器全過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
vue element upload實(shí)現(xiàn)圖片本地預(yù)覽
這篇文章主要為大家詳細(xì)介紹了vue element upload實(shí)現(xiàn)圖片本地預(yù)覽，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-08-08
Vue項(xiàng)目引發(fā)的「過(guò)濾器」使用教程
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目引發(fā)的「過(guò)濾器」使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
vue中PC端地址跳轉(zhuǎn)移動(dòng)端的操作方法
最近小編接到一個(gè)項(xiàng)目pc端和移動(dòng)端是兩個(gè)獨(dú)立的項(xiàng)目，兩個(gè)項(xiàng)目項(xiàng)目中的內(nèi)容基本相同，鏈接組合的方式都有規(guī)律可循，接到的需求便是在移動(dòng)端訪問(wèn)pc端的URL連接時(shí)，重定向至移動(dòng)端對(duì)應(yīng)頁(yè)面，下面小編給大家分享實(shí)現(xiàn)過(guò)程，一起看看吧
2021-11-11
如何在基于vue-cli的項(xiàng)目自定義打包環(huán)境
本篇文章主要介紹了在基于vue-cli的項(xiàng)目自定義打包環(huán)境，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
vue swipeCell滑動(dòng)單元格(仿微信)的實(shí)現(xiàn)示例
這篇文章主要介紹了vue swipeCell滑動(dòng)單元格(仿微信)的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09
Vue Element前端應(yīng)用開(kāi)發(fā)之界面語(yǔ)言國(guó)際化
我們開(kāi)發(fā)的系統(tǒng)，一般可以不用考慮語(yǔ)言國(guó)際化的問(wèn)題，大多數(shù)系統(tǒng)一般是給本國(guó)人使用的，而且直接使用中文開(kāi)發(fā)界面會(huì)更加迅速一些，不過(guò)框架最好能夠支持國(guó)際化的處理，以便在需要的時(shí)候，可以花點(diǎn)時(shí)間來(lái)實(shí)現(xiàn)多語(yǔ)言切換的處理，使系統(tǒng)具有更廣泛的受眾用戶。
2021-05-05