基於vue2 + vue-router + vuex 構建的一個新聞類大型單頁面應用 —— 今日頭條
vue2-news
前言
該專案UI模仿今日頭條，但我儘可能地做了許多修改，我不是做UI設計的，如何還看得過去，右上角點個 “star” 支援一下吧��
該專案包括移動端和native端，移動端共4個頁面，native端共20個頁面，涉及文章的分類、展示、閱讀、推薦、搜尋和使用者的登入、評論、收藏以及後臺文章編輯等等，是一個完整的生態鏈。其複雜度不用說大家也能感受到。如果這個專案能駕馭的了，你的Vue使用能力已經達到一定水平了，相信大部分公司的單頁面應用也就不在話下。
技術棧
vue2、vuex3、vue-router3、vue-awesome-swiper、vue-quill-editor
axios、mint-ui、flexible.js、IconFont
ES6/7、Stylus、ESlint、webpack3、
說明
如果對您有幫助，您可以點右上角 “Star”一下， 您的支援是我最大的動力！非常感謝！^_^ ��
或者您可以 “follow” 一下，我會不斷開源更多的有趣實用的專案
開發環境 macOS 10.12.6、Chrome 61、 nodejs 8.4.0
如有問題請直接在 Issues 中提，或者您發現問題並有非常好的解決方案，歡迎 PR ��
該專案是此開源系列的其中一個階段，更多內容檢視下方的最終目標
最終目標
第二階段：今日頭條（移動端 & native，難度：困難） —— 倉庫地址 —— 移動端演示地址， native端演示地址
第三階段：頭條號（pc端，難度：中等 ~ 困難） —— 倉庫地址 —— 還在開發，敬請期待！（已實現核心功能）
注：此係列只關注前端專案的實現，後端等知識不是此係列的範圍，但會告知一二。
注意
1、請把專案裡的mint-ui.common.js檔案替換掉 node_modules/minit-ui/lib/mint-ui.common.js檔案。主要優化下拉動作和左右滑動的體驗。詳細檢視文章
餓了麼mint-ui庫loadmore元件的下拉問題2、該專案使用vue-router的hash模式，專案裡寫了許多用來記錄頁面滾動條位置的程式碼，有點不優雅，其最終原因都是為了能實現首頁下拉和左右滑動切換欄目的功能。如需history模式的例項。請參考第一階段和第三階段的專案vue2-echo、vue2-health
3、native端某些程式碼在瀏覽器裡是不能生效的，這些是用於手機app的，如：獲取裝置uuid、微信客戶端登入等。技術是利用cordova打包成app和使用cordova的一些外掛。具體請檢視cordova官網
4、如果執行專案是灰屏，那可能是打開了app.vue檔案beforeRouteEnter鉤子的程式碼。這個主要是用於app需要保證載入完cordova外掛才能進入專案。瀏覽器開啟這段程式碼是進不到專案的。
5、關於後臺文章管理，操作的都是真實後臺資料，雖然沒什麼價值，但為了大家都能檢視一個很真的資料資訊，請勿隨意搗亂原有的資料哈，可以新建任務去操作檢視效果，謝謝啦。
效果演示
安裝包請戳這裡（目前只支援 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.jsonnative端目錄
├── 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