使用Vue仿製今日頭條（詳細教學）

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

前言

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

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

帳號: vue-toutiao
密碼： 123456

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

如果你想後台介面也自己開發的話。可以閱讀我這篇部落格Vue Node Mongodb 開發一個完整部落格流程

技術堆疊：

vue webpack vuex axios

結構：

• #build: webpack配置

• #config:專案設定參數

• #src

• assets : 靜態資源文件，存放圖片啥的

• components: 常用元件。例如 彈跳窗 等等。 。 。

• directive: 常用指令封裝

• router:路由表

• ##store: 狀態管理 vuex

• styles: 樣式檔案

• utils: 常用工具類別封裝

• views: 檢視頁面

• static: 靜態檔案： 存放favicon.ico 等等

• 此項目用到了DllPlugin 進行打包處理，所有啟動該專案時記得，先執行一次該腳本指令產生配置

效果示範：

幾個常用的知識點

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 鉤子函數來判斷是否需要登陸

// 如：系统设置需要登陆
{ 
  path: '/system', 
  name: '系统设置', 
  meta: { 
    login: true
  },
  component: _import_('System/index')
}

router.beforeEach((to, from, next) => {
  if (to.meta.login) { //判断前往的界面是否需要登陆
    if (store.state.user.user.name) { // 是否已经登陆
      next()
    }else{
      Vue.prototype.$alert('请先登录!')
        .then( () => {
          store.state.user.isLogin = true
        })
    }
  }else{
    if (to.meta.page) store.state.app.pageLoading = true
    next() 
  }
  
})

3. 動畫切換

透過偵測設定在Router上的animate屬性來判斷它做什麼樣的切換動畫

Router.prototype.animate = 0

// 获取每个路由meta上面的slide 来判断它做什么动画
{ 
  path: '/system', 
  name: '系统设置', 
  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來達到播放影片的效果

5. icon採用的是阿里巴巴向量圖

6. mock.js

7. Easy Mock

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在vue中處理物件屬性改變視圖不更新問題？

在vue2.0中不同畫面適配px與rem轉換問題

在Vue中如何實作帶進度條的檔案拖曳上傳功能

以上是使用Vue仿製今日頭條（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！