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上查看

啓動步驟

1. npm install
2. npm run dll (DllPlugin 構建, 只須要執行一次生成manifest.json配置文件就行)
3. npm run dev (本地開發)
4. npm run build (生產環境打包)

由於easy mock上面的數據有時被人改動了，因此當沒取到數據時，記得修改爲我寫的備用路徑。

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

github地址

博客地址