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 相关文章推荐
js 页面关闭前的出现提示的实现代码
May 25 Javascript
JavaScript中检测变量是否存在遇到的一些问题
Nov 11 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
react-intl实现React国际化多语言的方法
Sep 27 Javascript
vue video和vue-video-player实现视频铺满教程
Oct 30 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
基于jQuery的弹出框插件
2012/03/18 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
js跳转页面方法总结
2014/01/29 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
js判断当前页面用什么浏览器打开的方法
2016/01/06 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
微信小程序发送短信验证码完整实例
2019/01/07 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
解决微信小程序中的滚动穿透问题
2019/09/16 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
详解element上传组件before-remove钩子问题解决
2020/04/08 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
python获得一个月有多少天的方法
2015/06/04 Python
Python  pip安装lxml出错的问题解决办法
2017/02/10 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Python 的AES加密与解密实现
2019/07/09 Python
python求前n个阶乘的和实例
2020/04/02 Python
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
入学生会自荐书范文
2014/02/05 职场文书
后勤部经理岗位职责
2014/02/23 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
小学四年级学生评语
2014/12/26 职场文书
餐厅保洁员岗位职责
2015/04/10 职场文书
2016公司年会主持词
2015/07/01 职场文书
超级详细实用的pycharm常用快捷键
2021/05/12 Python
SQL实现LeetCode(177.第N高薪水)
2021/08/04 MySQL