vue2-news
公告
原項目已拆分，此倉庫保留今日頭條（web端代碼），native端代碼，請戳這裏
簡介
vue2-news 是一個仿今日頭條移動端的項目，共4個頁面，涉及文章的分類、展示、閱讀、推薦、搜索等。
說明
如果此開源系列對你有幫助，你可以點右上角 "star"一下，以表支持，非常感謝！_ ?
或者您可以 “follow（關注）” 一下作者，我正在不斷開源更多實用的項目
如有問題可以直接在 Issues 中提，或者加入我們下方Vue羣更進一步地交流
最終目標
Vue學習系列
- 第一階段：vue2-echo —— echo回聲（ 移動端，難度：★★☆☆☆ 入門項目）
- 第二階段：vue2-news —— 今日頭條（ 移動端，難度：★★★☆☆ 過渡項目）
- 第三階段：vue2-health —— 頭條號（ pc端，難度：★★★☆☆ 過渡項目）
- 第四階段：vue2-native —— 今日頭條（ native端，難度：★★★★☆ 進階項目）
注：此係列只關注前端項目的實現，後端等知識不是此係列的範圍，但會告知一二。
注意
1、本地運行項目請把項目裏的mint-ui.common.js文件替換掉 node_modules/minit-ui/lib/mint-ui.common.js文件。主要優化下拉動作和左右滑動的體驗。詳細查看文章 餓了麼mint-ui庫loadmore組件的下拉問題
2、下載App安裝包請使用手機瀏覽器下載。
項目演示
項目演示請戳這裏 （請使用手機模式預覽）
功能
- 下拉上滑查看更多內容
- 左右滑動切換欄目列表
- 點擊頭部回到頂部（指令）
- 右滑返回上一頁（指令）
- 視頻播放的加載、重播指示以及懸浮等功能
- 熱點文章和搜索推薦（後臺算法）
- 文章標籤（後臺算法）
- 分享
- 搜索（關鍵字高亮顯示）
- 刷新保持頁面的數據和狀態
- 展開全文
- 下載頁（目前只支持下載Android包）
部分截圖
- 首頁、詳情頁
- 搜索頁
目錄結構
├── build // 構建相關
├── config // 配置相關
├── src // 項目代碼
│ ├── assets // 樣式、圖標等靜態資源
│ ├── components // 全局公用組件
│ │ ├── banner.vue // banner組件
│ │ ├── commentItem.vue // 評論Item組件
│ │ ├── error.vue // 錯誤提示組件
│ │ ├── info.vue // listItem的列表信息組件
│ │ ├── listItem.vue // 文章List組件
│ │ ├── loading.vue // 加載提示組件
│ │ ├── myHeader.vue // 頭部組件
│ │ ├── popuMenu.vue // 模態框組件
│ ├── config // 全局公用方法
│ │ ├── cache.js // 緩存方法
│ │ ├── directive.js // 指令方法
│ │ ├── fetch.js // 請求方法
│ ├── page
│ │ ├── detail
│ │ | ├── components
│ │ | | ├── article.vue // 文章組件
│ │ | | ├── recommend.vue // 推薦組件
│ │ | | ├── share.vue // 分享組件
│ │ | | ├── tags.vue // 標籤組件
│ │ | ├── detail.vue // 詳情頁
│ │ ├── index
│ │ | ├── children
│ │ | | ├── channel.vue // 欄目頁
│ │ | ├── components
│ │ | | ├── index_footer.vue // 首頁底部組件
│ │ | | ├── index_header.vue // 首頁頭部組件
│ │ | | ├── pullContainer.vue // 下拉容器組件
│ │ | | ├── swiperContainer.vue // 滑動容器組件
│ │ | ├── index.vue // 首頁
│ │ ├── search
│ │ | ├── search.vue // 搜索頁
│ ├── router
│ │ ├── index.js // 路由配置
│ ├── store
│ │ ├── detail
│ │ | ├── index.js // 詳情頁store
│ │ ├── index
│ │ | ├── index.js // 首頁store
│ │ ├── search
│ │ | ├── index.js // 搜索頁store
│ │ ├── index.js // 全局store
│ ├── App.vue // 頁面入口
│ └── main.js // 程序入口
├── static // 空文件夾，只作爲github保留
├── .babelrc // babel-loader 配置
├── .eslintrc.js // eslint 配置項
├── .gitignore // git 忽略項
├── index.html // 入口html文件
└── package.json // package.json
安裝運行
# install dependencies
npm install
# serve with hot reload at localhost:8086
npm run dev
# build for production with minification
npm run build（File in the docs folder）
交流
歡迎熱愛學習、忠於分享的朋友一起來交流
- QQ：771674109
- Vue交流羣：338241465 —— 廣州-小鑫
License
Copyright © 2017-present，uncleLian