Vue实战篇(Vue仿今日头条)

6732
2月5日 · 2018年

因为也是纯粹的写写前端页面,所以数据方面用的是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地址

  • 表情
  • 预览
可使用部分markdown语法
一直奔跑的程序媛

npm i 后跑不起来

    一直奔跑的程序媛

    npm i 之后报错咋回事啊

      小b

      博客写的真厉害

        cd-mypro

        膜拜

          github过来的

            github过来的

              sadas

              nice

                柚子

                大神有没有掘金号

                  1212

                  密码错的阿

                    loppopp

                    顶,挺不错的项目,很有学习借鉴意义。
                    https://www.cnblogs.com/xiaoyan2017/p/10657781.html

                      大神到访数:25189