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

一些更加詳細的配置可在github上查看

在線預覽地址, 或可經過 chrome 控制檯手機模式觀看

github地址
博客地址