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实现的漂亮表单效果代码
Aug 18 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
Dec 04 Javascript
javascript原生ajax写法分享
Apr 10 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
JavaScript定时器制作弹窗小广告
Feb 05 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
微信小程序实现电影App导航和轮播
Nov 30 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
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中文汉字验证码
2007/04/08 PHP
PHP中的use关键字概述
2014/07/23 PHP
php获取一个变量的名字的方法
2014/09/05 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
php实现微信扫码支付
2017/03/26 PHP
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
WebStorm ES6 语法支持设置&babel使用及自动编译(详解)
2017/09/08 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
JavaScript this使用方法图解
2020/02/04 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
python实现倒计时的示例
2014/02/14 Python
Python实现设置windows桌面壁纸代码分享
2015/03/28 Python
python基础知识小结之集合
2015/11/25 Python
python验证码识别实例代码
2018/02/03 Python
python实现树形打印目录结构
2018/03/29 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
基于pandas中expand的作用详解
2019/12/17 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
Jack Rogers官网:美国经典的女性鞋靴品牌
2019/09/04 全球购物
Oral-B荷兰:牙医最推荐的品牌
2020/02/25 全球购物
小学少先队活动方案
2014/02/18 职场文书
讲文明懂礼貌演讲稿
2014/09/11 职场文书
体育个人工作总结
2015/02/09 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
Python数据类型最全知识总结
2021/05/31 Python
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js