vue-toutiao

这是用 vue.js 2.0 高仿 今日头条 的移动端项目，结合了原生app的部分功能以及网页版。

前言

本人是 今日头条 的重度用户，在学习vue.js过程中，在GitHub上看到了很多高仿webapp的好项目。由此在有了一定的技术积累后，开始构思使用Vue写今日头条，一是自己对于头条的喜爱，另外也是对于自己学习成果的检验。

技术栈

  1. vue.js 2.0全家桶（vue、vuex、vue-router）

  2. axios、jsonp

  3. element-ui、iview

  4. vue-lazyload、animate.css、moment、flexible.js

项目效果图

GitHub源码地址

在线地址

（待补充）

说明

  1. 项目内定死 账号: admin, 密码: admin。

  2. 因为数据原因，首页请求的数据接口来自网页版今日头条，修改了一些参数； 收藏 页面数据由本地（static文件）获取。

  3. 此项目主要是对于vue.js的运用，在样式上无法完全还原app，可能有些地方稍微丑陋，望请谅解！

  4. 因为网页接口限制，无法获得app中 视频 这一栏目的数据，所以将其改了一些页面结构。

  5. 项目会一直更新，完善更多的功能，如发现一些地方的bug请issue，谢谢。

安装

npm install

运行 (8090端口)

npm run dev

感谢

如果您也是头条的重度用户，感觉项目对您有学习帮助，麻烦给个star吧，嘿嘿^_^

vue2.0仿今日头条开源项目的更多相关文章

  1. vue 仿今日头条

    vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...

  2. Android 仿今日头条频道管理（下）（GridView之间Item的移动和拖拽）

    前言 上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动.详情请參考:Android 仿今日头条频道管理(上)(GridView之间Item的移动和 ...

  3. android仿今日头条App、多种漂亮加载效果、选择器汇总、记事本App、Kotlin开发等源码

    Android精选源码 android漂亮的加载效果 android各种 选择器 汇总源码 Android仿bilibili搜索框效果 Android记事本app.分类,涂鸦.添加图片或者其他附件 仿 ...

  4. iOS仿今日头条滑动导航

    之前写了篇博客网易首页导航封装类.网易首页导航封装类优化,今天在前两个的基础上仿下今日头条. 1.网易首页导航封装类中主要解决了上面导航的ScrollView和下面的页面的ScrollView联动的问 ...

  5. Vue2.0仿饿了么webapp单页面应用

    Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.c ...

  6. web2.0的几个开源项目

    web2.0的几个开源项目   Diggclone-开源digg类程序官方:http://www.talkingpixels.org/diggclone/index.php演示:同digg.com类似 ...

  7. [Android] Android 手机下 仿 今日头条 新闻客户端

    利用一个月的时间,自学了 Android 开发 ,为了检验学习成果,特意 开发了这个  仿 今日头条 新闻客户端 AppNews 包括图文新闻+视频新闻+图片新闻 预览演示如下: 功能说明: 1)底部 ...

  8. 项目vue2.0仿外卖APP（六）

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

  9. 项目vue2.0仿外卖APP（五）

    header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...

随机推荐

  1. 【Rsync项目实战】备份全网服务器数据

    [Rsync项目实战]备份全网服务器数据 标签(空格分隔): Linux服务搭建-陈思齐 ---本教学笔记是本人学习和工作生涯中的摘记整理而成,此为初稿(尚有诸多不完善之处),为原创作品,允许转载,转 ...

  2. python + selenium <三>

    sql 数据库连接 引用pymssql模块 import pymssqldef getDB(name,psw,dbname,sql): conn=pymssql.connect(HOST=host,N ...

  3. 无线同步模块SYN1000在电力监测相位测量领域的应用方案

    在电力监测领域,出于安全考虑,有些系统不得不采用无线通信的方式,在这样一个无线通信的应用系统,该如何来控制多个设备进行同步采样,以期提高相位角的测量精度,是一个不小的难题. 很多技术人员习惯性的采用无 ...

  4. Android Material Design 系列之 SnackBar详解

    SnackBar是google Material Design提供的一种轻量级反馈组件.支持从布局的底部显示一个简洁的提示信息,支持手动滑动取消操作,同时在同一个时间内只能显示一个SnackBar. ...

  5. 解决！同一ajax请求获取的图片路劲，在谷歌浏览器能正确展示图片，在火狐浏览器则显示路径undefined

    今天的工作学习之路是解决了昨天的问题,可看我昨天的随笔了解问题. 非常感谢昨天各位积极地解答,在此我引用 @不带汽的可乐 的方法进行解决,问题其实挺简单就解决了,先说说原因,在火狐浏览器中,当我在js ...

  6. GitHub开源：升讯威ADO.NET增强组件 sheng.ADO.NET.Plus V1.3

    GitHub: https://github.com/iccb1013/sheng.ADO.NET.Plus 早前分享过,当时没有把代码上传到Github,只是通过邮件的形式分享给了部分需要的朋友,最 ...

  7. GitHub中最强大的iOS Notifications和AlertView框架，没有之一！

    FFToast是一个非常强大的iOS message notifications和AlertView扩展.它可以很容易实现从屏幕顶部.屏幕底部和屏幕中间弹出一个通知.你可以很容易的自定义弹出的View ...

  8. iOS开发之视频播放

    1.如何播放视频 iOS提供了MPMoviePlayerController.MPMoviePlayerViewController两个类,可以用来轻松播放视频和网络流媒体\网络音频. 提示:网络音频 ...

  9. mac下重启apach

    打开终端 重启apache:sudo /usr/sbin/apachectl restart 关闭apache:sudo /usr/sbin/apachectl stop 开启apache:sudo ...

  10. 使用github+hexo搭建博客笔记

    听说github上可以搭博客,而且不用自己提供空间和维护,哈哈哈 作为一名程序猿,github搭博客对我有种神奇的吸引力,赶紧动手试一试 关于如何使用hexo搭建博客网上好的教程多如牛毛,而且这篇博客 ...