vue和mintui开发的webapp和pc的项目

# vue2-news     ## 前言 该项目包括移动端和native端，移动端共4个页面，native端共20个页面，涉及文章的分类、展示、阅读、推荐、搜索和用户的登录、评论、收藏以及后台文章编辑等等，是一个完整的生态链。其复杂度不用说大家也能感受到。如果这个项目能驾驭的了，你的Vue使用能力已经达到一定水平了，相信大部分公司的单页面应用也就不在话下。 ## 技术栈 1. [vue](https://cn.vuejs.org/v2/guide/) 2. [vue-router](https://router.vuejs.org/zh-cn/essentials/getting-started.html) 3. [vuex](https://vuex.vuejs.org/zh-cn/getting-started.html) 4. [axios（请求库）](https://github.com/axios/axios) 5. [mint-ui（饿了么移动端UI库）](http://mint-ui.github.io/docs/#/zh-cn2) 6. [vue-awesome-swiper（轮播图）](https://github.com/surmon-china/vue-awesome-swiper) 7. [jquery](https://github.com/jquery/jquery) 8. [vue-quill-editor（富文本）](https://github.com/surmon-china/vue-quill-editor) 9. [amfe-flexible（淘宝适配库）](https://github.com/amfe/lib-flexible) 10. [IconFont（阿里巴巴图标库）](http://www.iconfont.cn/) 11. [Stylus（css预处理器）](https://github.com/stylus/stylus) 12. [ES6/7（JS语法）](https://github.com/lukehoban/es6features) 13. [ESlint（JS语法规范）](https://github.com/standard/standard/blob/master/docs/RULES-zhcn.md) ## 说明 > 如果对您有帮助，您可以点右上角 "star"一下， 您的支持是我最大的动力！非常感谢！^_^ 🌹 > 或者您可以 "follow（关注）" 一下，我会不断开源更多实用的项目。 > 如有问题可以直接在 Issues 中提，或者加入我们下方的vue群更进一步地交流。 > 该项目是此开源系列的其中一个阶段，更多内容查看下方的最终目标 ## 最终目标 - 第一阶段：echo回声（移动端，难度：简单 ~ 中等） —— [仓库地址](https://github.com/uncleLian/vue2-echo) —— [演示地址](http://echo.liansixin.win) - 第二阶段：今日头条（移动端 & native，难度：困难） —— [仓库地址](https://github.com/uncleLian/vue2-news) —— [web演示地址](http://toutiao.liansixin.win)， [native端演示地址](http://native.liansixin.win) - 第三阶段：头条号（pc端，难度：中等 ~ 困难） —— [仓库地址](https://github.com/uncleLian/vue2-health) —— [演示地址](http://health.liansixin.win) （还在开发，敬请期待！已实现核心功能） ##### 注：此系列只关注前端项目的实现，后端等知识不是此系列的范围，但会告知一二。 ## 其他开源项目 - 后台类应用模板（vue全家桶 + element-ui） —— [仓库地址](https://github.com/uncleLian/vue2-blog) —— [演示地址](http://blog.liansixin.win/) ## 注意 > 1、请把项目里的mint-ui.common.js文件替换掉 node_modules/minit-ui/lib/mint-ui.common.js文件。主要优化下拉动作和左右滑动的体验。详细查看文章 [饿了么mint-ui库loadmore组件的下拉问题](http://liansixin.win/2017/08/01/mint-ui/) > 2、该项目使用vue-router的hash模式，项目里有自己实现用来记录页面滚动位置的代码，大家可以参考。如需history模式的实例。请参考第一阶段和第三阶段的项目vue2-echo、vue2-health > 3、native端某些代码在浏览器里是不能生效的，这些是用于手机app的，如：获取设备uuid、微信客户端登录等。技术是利用cordova打包成app和使用cordova的一些插件。具体请查看[cordova官网](http://cordova.axuer.com/) > 4、如果运行项目是灰屏，那可能是打开了app.vue文件beforeRouteEnter钩子的代码。这个主要是用于app需要保证加载完cordova插件才能进入项目。浏览器打开这段代码是进不到项目的。 > 5、关于后台文章管理，操作的都是真实后台数据，为了大家都能查看一个很真的数据信息，请勿随意修改原有数据，可以新建任务去操作查看效果，谢谢啦。 ## 效果演示 [web端demo请戳这里 ](http://toutiao.liansixin.win)（请使用chrome手机模式预览） <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_QRcode.png" width="250" height="250"/> [native端demo请戳这里](http://native.liansixin.win)（请使用chrome手机模式预览） <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/native_QRcode.png" width="250" height="250"/> [安装包请戳这里](http://m.toutiaojk.com/guide.html)（目前只支持 Android） <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/downLoad_QRcode.png" width="250" height="250"/> ## 功能 #### 共同功能 - [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定位 - [ ] 消息推送（极光推送：没调通，不弄了。。。） ## 部分截图 ### 移动端 - 首页、详情页 <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_index.png" width="365" height="619"/> <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_detail.png" width="365" height="619"/> - 搜索页 <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_search.png" width="365" height="619"/> <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_search2.png" width="365" height="619"/> - GIF <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_1.gif" width="365" height="619"/> <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/web_2.gif" width="365" height="619"/> #### native端： - 首页、详情页 <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/native_index.png" width="365" height="619"/> <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/native_detail.png" width="365" height="619"/> - 频道页、用户页 <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/native_channel.png" width="365" height="619"/> <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/native_user.png" width="365" height="619"/> - 后台文章管理页、广告页 <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/native_health.png" width="365" height="619"/> <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/native_ad.png" width="365" height="619"/> - GIF <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/native_1.gif" width="365" height="619"/> <img src="https://github.com/uncleLian/vue2-news/raw/master/screenshots/native_2.gif" width="365" height="619"/> ## 目录结构 #### 总目录 ``` bash ├── news-app // native端项目 ├── news-web // 移动端项目 ├── screenshot