需求分析
京东金融首页的需求分析如下:
头部
轮播图
新手特权
极速借贷
理财精选
新品推荐
生活服务
在线客服
公司介绍
导航条
20180308_1953.png
目前,大多数设计稿的尺寸是iPhone5:320*568。
拿到设计稿后,要先做架构:
组件化设计
按钮
俺就可以设计成抽象的组件。
我们要先给它一个默认类名,然后允许传递进来一个自定义的类名,这样就实现继承了;让自定义的类名去覆盖默认的样式,就实现了复用。
panel
轮播图
Vue有一些常用的组件,可以直接拿来用,比如vue-awesome-swiper
。链接:https://www.npmjs.com/package/vue-awesome-swiper
定义一个抽象的轮播图,然后把轮播图的图片和跳转的url作为参数传递。
css module
这个组件有一个类名,另外一个组件可能还有个同名的,为了防止冲突,可以使用命名空间。