基于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 ?

该项目是此开源系列的其中一个阶段,更多内容查看下方的最终目标

最终目标

注:此系列只关注前端项目的实现,后端等知识不是此系列的范围,但会告知一二。

注意

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定位
  • [ ] 消息推送(极光推送:没调通,不弄了。。。)

部分截图

移动端

  • 首页、详情页

  • 搜索页

  • 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

MIT

Copyright (c) 2017-present,uncleLian

转载于:https://juejin.im/post/5a1540316fb9a045067144ea

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值