基于Vue 2.0高仿 今日头条 单页应用——vue-toutiao

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中 视频 这一栏目的数据，所以将其改了一些页面结构。

安装

git clone https://github.com/hcy1996/vue-toutiao.git

安装

npm install

运行 (8090端口)

npm run dev

感谢

• 如果您也是头条的重度用户，感觉项目对您有学习帮助，麻烦给个star吧，嘿嘿^_^
• 项目会一直更新，完善更多的功能，如发现一些地方的bug请issue，谢谢。

---

聊一些项目有关的内容

首先，重要的逻辑和操作都是在 home页（首页） 。

这个项目很关键的一环便是数据的获取，而且现在网上很少有现成的新闻数据接口，当然也有，但是返回的数据无法满足我们的需求。

后来我在刷新今日头条（f12移动模式）时，在控制台network中捕捉到了数据接口，现在直接分享给大家。

http://m.toutiao.com/list/?tag='  payload.kind  '
&ac=wap&count=20&format=json_raw&as=A125A8CEDCF8987&cp=58EC18F948F79E1&
min_behot_time= parseInt((new Date().getTime()) / 1000)

这个接口其实很简单，主要修改tag和min_behot_time这两个字段。

• min_behot_time
  请求发出时的时间戳，秒为单位。
• tag
  "推荐"：__all__,
  "视频"：vedio,
  除上述两个外：news_×××

  说一说这 tag

  tag中news_×××的 ××× 内容需要几分钟去复制一下，
  比如“热点”：news_hot; “军事”：news_military。。。等等

另外这个请求是有跨域问题的，可用代理（设置proxyTable）和jsonp实现。
其实大家仔细看都能发现，我这里就献丑了，希望对您以后做一些新闻相关的项目有帮助。

---

这个项目的更新会在readme中都写出大概，之后会继续把更新中一些具体的代码案例分享在 掘金 的专题里，希望大家多多支持，谢谢~。~

4-23 更新

1. 美化首页每条新闻的样式；
2. 底部导航图标与文字调整；
3. 修改detail页回到home页“点击加载更多”按钮消失的bug；

---

更多专业前端知识，请上 【猿2048】www.mk2048.com