vue2.0仿今日头条开源项目

author author     2022-08-28     277

关键词:

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源码地址

在线地址
在线预览Demo

说明

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

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

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

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

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

安装

npm install

运行 (8090端口)

npm run dev

感谢

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

仿今日头条实时新闻微信小程序项目源码(代码片段)

微信公众号:创享日记发送:今日头条获取完整源码(微信开发者工具导入即可用)以下可以忽略不看!今日头条是北京字节跳动科技有限公司开发的一款基于数据挖掘的推荐引擎产品,为用户推荐信息、... 查看详情

今日头条开源项目分析笔记1

1.InitApp==>项目的入口Application1.1.继承了MultiDexApplication  超过65K方法的APP,会遇到65535的错误。原因就是为了支持比较大型的APP而产生。  参考文章:Android分包MultiDex原理详解。 1.2.在build.gradle中修改multiDexEnabled   ... 查看详情

仿今日头条滑动导航栏

<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>今日头条APP顶部点击可居中导航</title><metaname="viewport"content="width=devi 查看详情

仿今日头条按钮loading效果

效果代码:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"conten 查看详情

新闻网站电脑版带手机版源码,仿东方头条,今日头条,搜狐自媒体网站帝国cms定制

专业定制新闻网站,仿东方头条,今日头条,搜狐自媒体网站源码开发,支持二级域名显示,新闻资讯聚合的头条新闻资讯,内容包括今日头条、头条新闻、社会热点、国内国际快讯、军事、明星、八卦、娱乐、时尚、体育等各... 查看详情

微信小程序-今日头条案例

github地址:  https://github.com/HowName/toutiao项目为仿今日头条,使用了百度ApiStore接口查询数据,使用微信组件/api有封装请求方法,底部tab,启动页动画,loading,scroll-view,swiper,列表页支持上下拉加载更多效果图: 启动欢迎页,几行代... 查看详情

自适应tab宽度可以滑动文字逐渐变色的tablayout(仿今日头条顶部导航)

...TabLayout,它可以配合ViewPager完成很好的效果。一种类似于今日头条指示器,根据ViewPager的页面滑动,文字逐渐变色。今日头条的顶部tab导航效果的实现,我们一般会用RadioGroup+Fragment+ViewPag 查看详情

android仿今日头条频道管理(下)(gridview之间item的移动和拖拽)

前言上篇博客我们说到了今日头条频道管理的操作交互体验,我也介绍了2个GridView之间Item的相互移动。详情请參考:Android仿今日头条频道管理(上)(GridView之间Item的移动和拖拽)今天把相对照较复杂的gridView的拖拽也记录下... 查看详情

仿今日头条app手机端顶部触屏滑动导航(代码片段)

swiper.js<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">< 查看详情

今日头条——面试案例

今日头条面试案例1-数据结构中堆的概念,堆排序-死锁的概念,怎么避免死锁-ReentrantLock、synchronized和volatile(n面)-HashMap-singleTask启动模式-用到的一些开源框架,介绍一个看过源码的,内部实现过程。-消息机制实现-ReentrantLock... 查看详情

go--今日头条架构

夏绪宏,今日头条架构师,专注对高性能大规模Web架构,云计算、性能优化、编程语言理论等方向,PHPcommitter,HHVM项目贡献者。2009加入百度,先后从事大规模IDC自运维设施建设、云计算平台的架构设计、贴吧业务性能优化、百... 查看详情

今日头条和今日头条极速版有什么区别

3C数码您的浏览器不支持HTML5视频zymedia(\'video\')参考技术A今日头条和今日头条极速版区别为:安装包大小不同、占用运行内存不同、特色功能不同。一、安装包大小不同1、今日头条普通版:今日头条普通版的安装包大小为22.8M。2... 查看详情

今日头条——机器学习算法岗1234面

目录一面二面三面四面一面自我介绍问项目,问的很细。速度、性能如何做的优化fasterrcnn、yolo、ssd的区别LSTM的结构与前向传播现代cpu算力在什么量级手写代码:全排列二面问项目,主要问创新点在哪里推导PCA概率题:13个人生... 查看详情

今日头条架构演进之路——高压下的架构演进专题(含ppt)

今日头条架构演进之路——高压下的架构演进专题(含PPT)导读:高可用架构在6月25日举办了『高压下的架构演进』专题沙龙,进行了闭门私董会研讨及对外开放的四个专题的演讲,期望能促进业界应对峰值方法及工具的讨论,... 查看详情

今日头条机器学习实习生

2019-01-18今日头条机器学习实习生-音视频方向中关村紫金数码园1.自我介绍2.介绍项目3.CNN原理,OCR原理,激活函数,为什么用ReLu,如何避免陷入局部极小值4.传统图像特征提取,边缘检测5.C语言变量常量如何存储,进程线程,如何... 查看详情

今日头条面试——ios开发岗

目录一面二面三面一面1、自我介绍2、项目相关3、怎么自定义导航跳转4、谈谈runtime的理解5、KVC的用途6、使用methodswizzling要注意什么?(进行版本迭代的时候需要进行一些检验,防止系统库的函数发生了变化)7、谈对引用计数... 查看详情

今日头条面试——ios开发面试题

目录一面二面三面一面*1、自我介绍*2、项目相关*3、怎么自定义导航跳转*4、谈谈runtime的理解*5、KVC的用途*6、使用methodswizzling要注意什么?(进行版本迭代的时候需要进行一些检验,防止系统库的函数发生了变化)*7、谈对引用... 查看详情

如何区分今日头条与今日头条极

参考技术A今日头条和今日头条极速版区别有:内存大小不一样、定位人群不一样、功能特色不一样、界面设计不一样。1、内存大小不一样今日头条极App:4.7M。今日头条极速版App:安装包4.7M。2、定位人群不一样普通版:面向的... 查看详情