Vue仿今日头条实例详解


Posted in Javascript onFebruary 06, 2018

前言

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 进行打包处理,所有启动该项目时记得,先执行一次该脚本命令生成配置

效果演示:

Vue仿今日头条实例详解

Vue仿今日头条实例详解

Vue仿今日头条实例详解

Vue仿今日头条实例详解

Vue仿今日头条实例详解

几个常用的知识点

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

代码实例:https://github.com/cd-dongzi/vue-project/tree/master/vue-toutiao

Javascript 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
jQuery 创建Dom元素
May 07 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
jQuery判断元素是否存在的可靠方法
May 06 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
Three.js基础部分学习
Jan 08 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
vue.js中实现登录控制的方法示例
Apr 23 Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 #Javascript
详解React开发必不可少的eslint配置
Feb 05 #Javascript
详解js的作用域、预解析机制
Feb 05 #Javascript
Vue使用枚举类型实现HTML下拉框步骤详解
Feb 05 #Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 #jQuery
详解vue静态资源打包中的坑与解决方案
Feb 05 #Javascript
理解Koa2中的async&await的用法
Feb 05 #Javascript
You might like
PHP下判断网址是否有效的代码
2011/10/08 PHP
基于php和mysql的简单的dao类实现crud操作功能
2014/01/27 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
JavaScript 代码压缩工具小结
2012/02/27 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
2018/09/14 Javascript
layui按条件隐藏表格列的实例
2019/09/19 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
快速入门python学习笔记
2017/12/06 Python
Django自定义用户认证示例详解
2018/03/14 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
pandas 透视表中文字段排序方法
2018/11/16 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
python编写微信公众号首图思路详解
2019/12/13 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
Django后端分离 使用element-ui文件上传方式
2020/07/12 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
传播学毕业生求职信
2013/10/11 职场文书
酒店保安领班职务说明书
2014/03/04 职场文书
李敖北大演讲稿
2014/05/24 职场文书
大学生档案自我鉴定(2篇)
2014/10/14 职场文书
教师个人年度总结
2015/02/11 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
《青山不老》教学反思
2016/02/22 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
《废话连篇——致新手》——chinapizza
2022/04/05 无线电
Spring 使用注解开发
2022/05/20 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers