基於vue2 + vue-router + vuex 構建的一個新聞類大型單頁面應用 —— 今日頭條
vue2-news
前言
該項目UI模仿今日頭條，但我儘量地作了許多修改，我不是作UI設計的，如何還看得過去，右上角點個 "star" 支持一下吧🌹html
該項目包括移動端和native端，移動端共4個頁面，native端共20個頁面，涉及文章的分類、展現、閱讀、推薦、搜索和用戶的登陸、評論、收藏以及後臺文章編輯等等，是一個完整的生態鏈。其複雜度不用說你們也能感覺到。若是這個項目能駕馭的了，你的Vue使用能力已經達到必定水平了，相信大部分公司的單頁面應用也就不在話下。前端
技術棧
vue二、vuex三、vue-router三、vue-awesome-swiper、vue-quill-editorvue
axios、mint-ui、flexible.js、IconFontnode
ES6/七、Stylus、ESlint、webpack三、webpack
說明
若是對您有幫助，您能夠點右上角 "Star"一下， 您的支持是我最大的動力！很是感謝！^_^ 🌹ios
或者您能夠 "follow" 一下，我會不斷開源更多的有趣實用的項目git
開發環境 macOS 10.12.六、Chrome 6一、 nodejs 8.4.0github
若有問題請直接在 Issues 中提，或者您發現問題並有很是好的解決方案，歡迎 PR 👍web
該項目是此開源系列的其中一個階段，更多內容查看下方的最終目標算法
最終目標
第二階段：今日頭條（移動端 & native，難度：困難） —— 倉庫地址 —— 移動端演示地址， native端演示地址
第三階段：頭條號（pc端，難度：中等 ~ 困難） —— 倉庫地址 —— 還在開發，敬請期待！（已實現核心功能）
注：此係列只關注前端項目的實現，後端等知識不是此係列的範圍，但會告知一二。
注意
一、請把項目裏的mint-ui.common.js文件替換掉 node_modules/minit-ui/lib/mint-ui.common.js文件。主要優化下拉動做和左右滑動的體驗。詳細查看文章 餓了麼mint-ui庫loadmore組件的下拉問題
二、該項目使用vue-router的hash模式，項目裏寫了許多用來記錄頁面滾動條位置的代碼，有點不優雅，其最終緣由都是爲了能實現首頁下拉和左右滑動切換欄目的功能。如需history模式的實例。請參考第一階段和第三階段的項目vue2-echo、vue2-health
三、native端某些代碼在瀏覽器裏是不能生效的，這些是用於手機app的，如：獲取設備uuid、微信客戶端登陸等。技術是利用cordova打包成app和使用cordova的一些插件。具體請查看cordova官網
四、若是運行項目是灰屏，那多是打開了app.vue文件beforeRouteEnter鉤子的代碼。這個主要是用於app須要保證加載完cordova插件才能進入項目。瀏覽器打開這段代碼是進不到項目的。
五、關於後臺文章管理，操做的都是真實後臺數據，雖然沒什麼價值，但爲了你們都能查看一個很真的數據信息，請勿隨意搗亂原有的數據哈，能夠新建任務去操做查看效果，謝謝啦。
效果演示
web端demo請戳這裏 （請使用chrome手機模式預覽）
native端demo請戳這裏（請使用chrome手機模式預覽）
安裝包請戳這裏（目前只支持 Android）
功能
共同功能
- [x] 下拉上滑請求數據
- [x] 左右滑動切換欄目
- [x] 點擊頭部回到頁面頂部（指令）
- [x] 右滑返回上一頁（指令）
- [x] 視頻播放的加載、重播指示以及懸浮等功能
- [x] 熱點文章和搜索推薦（後臺算法）
- [x] 文章標籤（後臺算法）
- [x] 分享功能（移動端分享網址，native端微信分享）
- [x] 搜索功能
移動端
- [x] 刷新保持頁面的數據和狀態
- [x] 展開全文
- [x] 下載頁（目前只支持下載Android包）
native端
- [x] 增減欄目
- [x] 瀏覽歷史
- [x] 微信客戶端登陸
- [x] 點贊、收藏、評論
- [x] 刪除瀏覽歷史、收藏、評論
- [x] 持久保存用戶的登陸狀態、瀏覽歷史、收藏等數據
- [x] 後臺文章管理（發表、修改、刪除、撤回、預覽等功能）
- [x] 啓動廣告頁
- [x] 熱更新、版本更新
- [x] GPS定位
- [ ] 消息推送（極光推送：沒調通，不弄了。。。）
部分截圖
移動端
- 首頁、詳情頁
- 搜索頁
- GIF
native端：
- 首頁、詳情頁
- 頻道頁、用戶頁
- 後臺文章管理頁、廣告頁
- GIF
目錄結構
總目錄
├── news-app // native端項目
├── news-web // 移動端項目
├── screenshots // 項目截圖
├── mint-ui.common.js // 修改以後的mint-ui源碼文件
├── README.md // 項目介紹複製代碼
移動端目錄
├── 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複製代碼
native端目錄
├── 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 // 模態框組件
│ │ ├── publishItem.vue // 後臺文章列表組件
│ │ ├── tool.vue // 評論工具欄組件
│ ├── config // 全局公用方法
│ │ ├── autoTextarea.js // textarea自動增長高度方法
│ │ ├── cache.js // 緩存方法
│ │ ├── cordova.js // cordova插件方法
│ │ ├── directive.js // 指令方法
│ │ ├── fetch.js // 請求方法
│ ├── page
│ │ ├── detail
│ │ | ├── children
│ │ | | ├── comment.vue // 評論頁
│ │ | | ├── reply.vue // 回覆頁
│ │ | ├── components
│ │ | | ├── article.vue // 文章組件
│ │ | | ├── collect.vue // 收藏組件
│ │ | | ├── like.vue // 點贊組件
│ │ | | ├── recommend.vue // 推薦組件
│ │ | | ├── share.vue // 分享組件
│ │ | | ├── tags.vue // 標籤組件
│ │ | ├── detail.vue // 詳情頁
│ │ ├── index
│ │ | ├── collect
│ │ | | ├── collect.vue // 收藏頁
│ │ | ├── home
│ │ | | ├── children
│ │ | | | ├── channel.vue // 欄目頁
│ │ | | ├── components
│ │ | | | ├── homeHeader.vue // 首頁頭部組件
│ │ | | | ├── pullContainer.vue // 下拉容器組件
│ │ | | | ├── swiperContainer.vue // 滑動容器組件
│ │ | | ├── home.vue // 主頁
│ │ | ├── user
│ │ | | ├── children
│ │ | | | ├── health
│ │ | | | | ├── health.vue // 文章管理頁
│ │ | | | | ├── preview.vue // 文章預覽頁
│ │ | | | | ├── publish.vue // 文章編輯頁
│ │ | | | ├── feedBack.vue // 用戶反饋頁
│ │ | | | ├── myComment.vue // 個人評論頁
│ │ | | | ├── myHistory.vue // 個人歷史頁
│ │ | | | ├── QRcode.vue // 應用分享頁
│ │ | | ├── user.vue // 用戶頁
│ │ | ├── video
│ │ | | ├── video.vue // 視頻頁
│ │ | ├── index.vue // 首頁
│ │ | ├── navBar.vue // 底部導航組件
│ │ ├── login
│ │ | ├── login.vue // 登陸頁
│ │ ├── search
│ │ | ├── search.vue // 搜索頁
│ ├── router
│ │ ├── index.js // 路由配置
│ ├── store
│ │ ├── collect // 收藏頁store
│ │ ├── detail // 詳情頁store
│ │ ├── health // 文章管理store
│ │ ├── index // 首頁store
│ │ ├── login // 登陸store
│ │ ├── search // 搜索頁store
│ │ ├── user // 用戶store
│ │ ├── video // 視頻頁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:8088
npm run dev
# build for production with minification
npm run build複製代碼
交流
歡迎熱愛學習、忠於分享的朋友一塊兒來交流
- QQ：771674109
- WX：L771674109
- Vue交流羣：338241465
License
Copyright (c) 2017-present，uncleLian
- 1. 基於 vue2 + vuex 構建一個具備 45 個頁面的大型單頁面應用
- 2. 基於 vue2 + vuex 構建一個具有 45 個頁面的大型單頁面應用
- 3. 基於Vue 2.0高仿 <今日頭條> 單頁應用。
- 4. 基於Vue 2.0高仿 今日頭條 單頁應用——vue-toutiao
- 5. 基於Vue2.0+Vue-router構建一個簡單的單頁應用
- 6. iOS新聞應用源碼，高仿今日頭條源碼等
- 7. Vue2.0仿今日頭條
- 8. 使用 Vuex + Vue.js 構建單頁應用
- 9. weex 今日頭條
- 10. python 爬蟲 selenium 爬取今日頭條首頁新聞
- 更多相關文章...
- • PHP imagecreate - 新建一個基於調色板的圖像 - PHP參考手冊
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • Kotlin學習（二）基本類型
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。