Vue2.5+Vue-cli3.0+Vue-router仿制京东金融前端页面

废话不多说，我先上图，前端最近这一年简直就是飞速发展啊，两年前我初步学习vue框架时，就深深爱上了这个框架，在自己的前两年工作中，却没有达到自己的意愿拿到Vue技术栈的工作，甚至这段工作的时间都没什么与移动端相关的开发，唯一有关的可能就是小程序开发了，心里那个委屈啊。所以这一个月，我下定决心，从新定位自己的程序猿道路，尽心学习移动端的开发，重新拾起vue。这周花了一周时间来做这个demo，因为白天都在上班，就只有下班回家每天做个两三小时，ok，直入正题。在实际工作中或者学习提高中，做项目的时候一定会有一个清晰的流程，这个流程不一定固定，但是肯定是最高效的，在做项目的时候，无论是移动端还是web端，我们都要养成一个分析设计稿的习惯，在分析设计稿时就要考虑使用什么技术栈去完成这个项目最合适。好比这个京东金融的demo，我们打开官网，首先分析它有哪些模块，每个模块由哪几个部分组成，每个部分又该使用什么组件来制作，而这些模块是否有重复使用率较高的，这样分析结束后，大脑中基本就已经构思出大体的开发框架和流程。

在搭建这个项目之前，本地应该提前配置好node环境、vue-cli、git等，至于怎么配置，就不细说了。该demo一共五个页面，分别是首页、赚钱、借钱、省钱、会员，其中用得最多的技术就是父子组件之间的传递数据，要知道vue最重要的两点就是双向绑定和组件化，这个demo就能很好的达到组件化的训练。页面不多，由于没有涉及到跨组件传值，就没有使用vuex来管理，时间少，我也没有去写json数据了，因此axios请求数据也没用到，不过过段时间我会补上的，这段时间忙于找工作，就暂时放一放。css也推崇模块化了，为了达到这一点，我使用的是stylus，它真的很方便。以上的介绍得差不多了，那来说说我遇到的问题，这么demo是我这段时间第三次做的移动端，最难的就是自适应屏幕，我没有用ui框架，即使用了mint都是做最后的会员页，vue-awesome-swiper做轮播图，本人性格就这样，什么不擅长我偏要这么做，于是我就用rem来实现整个demo的自适应，稿子是基于IPhone6来定的，最后完成发现只适应与iphone567等，对于大一点的屏幕比如ipad就失效了，很气愤，一时半会儿没找出原因，如果各位能够发现原因，可以提出来，我好及时学习并改正。

项目gitee地址：https://gitee.com/jacobwu1015/Jdjr