Webcourse/23-Vue框架-组件化思维/03-京东金融的首页.md
qianguyihao ddb91d1ea1 modify
2018-03-12 21:01:35 +08:00

1.1 KiB
Raw Blame History

需求分析

京东金融首页的需求分析如下:

  • 头部

  • 轮播图

  • 新手特权

  • 极速借贷

  • 理财精选

  • 新品推荐

  • 生活服务

  • 在线客服

  • 公司介绍

  • 导航条

20180308_1953.png

目前大多数设计稿的尺寸是iPhone5320*568。

拿到设计稿后,要先做架构:

组件化设计

按钮

俺就可以设计成抽象的组件。

我们要先给它一个默认类名,然后允许传递进来一个自定义的类名,这样就实现继承了;让自定义的类名去覆盖默认的样式,就实现了复用

panel

轮播图

Vue有一些常用的组件可以直接拿来用比如vue-awesome-swiper。链接:https://www.npmjs.com/package/vue-awesome-swiper

定义一个抽象的轮播图然后把轮播图的图片和跳转的url作为参数传递。

css module

这个组件有一个类名,另外一个组件可能还有个同名的,为了防止冲突,可以使用命名空间。

第三方的自适应解决方案

hotcsshttps://github.com/imochen/hotcss