當前位置：首頁 > 前端技术 > vue >内容正文

vue

基于vue2 + vue-router + vuex 构建的一个新闻类大型单页面应用 —— 今日头条

發布時間：2023/12/15 vue 43 豆豆

生活随笔收集整理的這篇文章主要介紹了基于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 ?

該項目是此開源系列的其中一個階段，更多內容查看下方的最終目標

最終目標

第一階段：echo回聲（移動端，難度：簡單 ~ 中等） —— 倉庫地址 —— 項目演示地址
第二階段：今日頭條（移動端 & 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、關于后臺文章管理，操作的都是真實后臺數據，雖然沒什么價值，但為了大家都能查看一個很真的數據信息，請勿隨意搗亂原有的數據哈，可以新建任務去操作查看效果，謝謝啦。

效果演示

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定位
[ ] 消息推送（極光推送：沒調通，不弄了。。。）

部分截圖

移動端

首頁、詳情頁

搜索頁

native端：

首頁、詳情頁

頻道頁、用戶頁

后臺文章管理頁、廣告頁

目錄結構

總目錄

├── news-app // native端項目 ├── news-web // 移動端項目 ├── screenshots // 項目截圖 ├── mint-ui.common.js // 修改之后的mint-ui源碼文件 ├── README.md // 項目介紹復制代碼

移動端目錄

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

MIT

轉載于:https://juejin.im/post/5a1540316fb9a045067144ea

總結

以上是生活随笔為你收集整理的基于vue2 + vue-router + vuex 构建的一个新闻类大型单页面应用 —— 今日头条的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【坐在马桶上看算法】算法10：二叉树
下一篇： mui + vue 模板