Vue實戰篇（Vue仿今日頭條）

cd-dongzi發表於2018-02-06

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
    }
}
複製程式碼