Vue2.0仿今日頭條

toutiao

基於Vue2.0仿照今日頭條的移動端項目

源碼地址：toutiao_Vue2.0

預覽地址：toutiao_Vue2.0

前言

先佔個坑位。

以前打算作個東西熟悉vue的使用，因爲本身蠻喜歡刷手機看看新聞的，借鑑了其餘同窗的項目（連接在下面），本身也作了一個。項目中還有許多能夠完善的地方，不足之處但願小夥伴們能夠issue，我會在這裏更新。目前尚未全面地測試該項目，有問題提問，你們一塊兒學習。

技術棧

1. 主要用到：vue、vuex、vue-router

2. 移動端佈局：flexble.js

3. 其餘: jsonp、axios、iView、vue-lazyload、moment

功能

• 各種新聞的查看

• 本地收藏新聞

• 新聞的搜索

• 待...

效果

移動端能夠直接掃描，或者在chrome的device toolbard打開傳送門

目錄

|- src
   |- assets
      |- image  // 項目圖片
      |- style
         |- common.scss  // 移動端的單位的轉換
         |- global.scss  // 全局樣式
         |- newsList.scss  // 新聞列表的樣式
         |- transition.scss  // 過渡樣式
   |- components  // 組件
      |- Back.vue  // 返回
      |- Comment.vue  // 評論
      |- Footer.vue  // 頁腳
      |- HomeNav.vue  // 新聞類型導航
      |- Loading.vue  // 加載
      |- Loadingmore.vue  // 加載更多
      |- Nav.vue  // 導航
      |- Newslist.vue  // 新聞列表
      |- Top.vue  // 返回頂部
      |- Warning.vue  // 出錯提醒
   |- pages  // 主體頁面
      |- About.vue // 信息頁
      |- Collect.vue  // 收藏頁
      |- Content.vue  // 文章頁
      |- Home.vue  // 主頁
      |- Search.vue  // 收藏頁
      |- Session.vue  // 段子頁
   |- router  // 路由
   |- store  // 狀態管理
   |- App.vue
   |- main.js  // 入口文件
|- static
   |- collect.json  // 初始收藏
   |- imgerror.jpg  // 懶加載錯誤圖片
   |- imgloading.jpg  // 懶加載中圖片

更多細節在源碼中會有一些註釋

API

1. 獲取新聞：https://m.toutiao.com/list/?tag=新聞類型&ac=wap&count=20&format=json_raw&as=A125A8CEDCF8987&cp=58EC18F948F79E1&min_behot_time=時間

2. 獲取文章：https://m.toutiao.com/i新聞ID/info/'

3. 獲取段子：https://www.toutiao.com/api/article/feed/?category=essay_joke&utm_source=toutiao&widen=1&max_behot_time=1500114422&max_behot_time_tmp=1500114422&tadrequire=true&as=A1F52966E9EEF00&cp=59692E6FD0E09E1

4. 搜索： https://www.toutiao.com/search_content/?offset=相對位置&format=json&keyword=關鍵詞&autoload=true&count=20&cur_tab=1

還能夠參考今日頭條Api分析

最後

本項目做爲本身的學習記錄，還有許多須要改進的地方，也但願能夠幫到有須要的小夥伴，一塊兒進步。

Ps：我不介意有好多好多star[捂臉]

Github

Blog

參考

hcy1996的項目

vue-lazyload實現圖片懶加載

jsonp跨域獲取數據

flexible.js淘寶的移動端處理