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地址

博客地址

作者：cd-dongzi
鏈接：https://juejin.im/post/5a7914386fb9a063543c0f44
來源：掘金
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。