如何详细步骤解析Vue实现新闻展示页开发？

本文共计1772个文字，预计阅读时间需要8分钟。

需求+1. 制作一个新闻展示页面 2. 新闻分类可自定义 3. 每类新闻内容，格式可不同 4. 可以上拉加载新数据 5. 点击进入详情页，返回时定位到原位置，显示图片、技术、轮播图

需求

1. 做一个新闻展示页
2. 新闻分类可以自定义
3. 每类新闻的内容，样式不一样
4. 上拉加载新的数据
5. 点击进入详情页，再返回时，定位到原来的位置

图片展示

采用的技术

轮播图使用：swiper
zepto.js
vue.js
vue.resource.js
vue-router.js
滑动插件：iscroll.js
界面样式采用的 weui

设计的思路

因为使用了vue.js 每个分类的样式不一样，而且分类是可以配置的。所以呢，想到了单页面应用，所以选择了vue-router.js的路由。也使用了vue.resource 插件用来做数据传输。

因为我比较菜，所以呢还是使用的原始的引入方式，没有使用webpack之类的打包工具，就最原始的js 写法。

难点

使用了路由，是为了返回的时候，可以回到刚才离开的地方，vue虽然有自带的keep-alive 但是似乎必须使用路由的history模式，还要修改服务器端的东西，所以感觉不是很合适。