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

博客地址