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. 【2017-03-12】SQL Sever 子查询、聚合函数

    一.子查询 子查询:把一条查询语句,当做值来使用子句的查询结果必须是一列子句可以返回多行数据,但必须是一列 子句返回的值为一个值的时候: 例如: 我只知道c026这个编号,我要查询比这个车价格低的全部 ...

  2. Archlinux 的U盘自动装载(二)升级到 udisks2

    在安装 mysql-gui-tools 过程中,发现需要用到 udisks2.udisks和udisks2可以互相替换也可以共用.最后决定换用 udisks2 安装 先卸载原来的软件,如果有的话. p ...

  3. ViewPager详解

    一.ViewPager简介 ViewPager 如其名所述,是负责翻页的一个 View.准确说是一个 ViewGrop,包含多个 View 页,在手指横向滑动屏幕时,其负责对 View 进行切换.为了 ...

  4. PHP语言开发微信公众平台(订阅号)之curl命令

    在开发过程中,经常会遇到要求用curl命令调用接口的情况 那么,什么是curl,简单来说curl是一个利用url语法规定来传输文件和哦数据的工具,支持很多协议,如 http.ftp.telent 等, ...

  5. CCS内存数据转成图片

    在嵌入式DSP图像处理开发过程中,经常需要将DSP内存中的图像数据保存下来,作为数据集.CCS5.4或者CCS3.3都只支持保存内存原始数据而不支持将内存数据直接存储为一张图片,为了能将CCS保存的. ...

  6. 【MySQL】分页查询实例讲解

    MySQL分页查询实例讲解 1. 前言 本文描述了团队在工作中遇到的一个MySQL分页查询问题,顺带讲解相关知识点,为后来者鉴.本文的重点不是"怎样"优化表结构和SQL语句,而是探 ...

  7. JavaScript高级程序设计(学习)

    文档模式是:混杂模式和标准模式. 若在文档开始处没有文档类型声明,则浏览器就会开启混杂模式.这种模式在不同的浏览器下行为差异非常大,如果不使用某些hack技术,跨浏览器的行为根本就没有一致性可言. 局 ...

  8. 如何用正确的姿势查看 主机系统的CPU信息

    一.关于CPU的几个概念 CPU的作用 计算机中的中央处理单元(CPU)执行基本的计算工作 -- 运行程序.但是,一个单核的CPU同一时间只能一次执行一个任务,为了提高计算机的处理能力,也就出现了多C ...

  9. [原创]HBase学习笔记(3)- Java程序访问HBase

    这里介绍使用java api来访问和操作HBase,例如create.delete.select.update等操作. 1.HBase配置 配置HBase使用的zookeeper集群地址和端口. pr ...

  10. iOS开发之KVC

    1.KVC概述 KVC(Key-value coding)是一套利用字符串标识符间接访问对象属性和关系的机制.Cocoa Programming中,Core Data,Application Scri ...