【组件模块化9】公共模块

header模块

三个部分

中间图片部分用Img还是background-image来做？

用img很简单，但是占用了一个http连接数，图片地址请求也分了一个资源连接；
使用背景图片的话，图片的尺寸很好控制backgound-size来控制；背景图可以控制任何一个位置，background-image和background-position；背景图片可以通过构建工具把图片打上base64编码，打到css里面去，这样就不会占用http请求连接数。

CSSmodule局域化

不做局域化处理是全局生效的，页面中可能有多个left这样的命名，会导致乱套。

这就是局域化处理
记得加上一个viewport.js。
https://github.com/imochen/hotcss/blob/master/src/hotcss.js
viewport.js生效后
本地创建一个js,粘贴刚刚链接中的js
然后修改webpack，把它引入进来。
修改webpack.config.js

slider组件

hslider.vue 1 hslider.vue 2

取名叫做hslider.vue是为了区分，这里的slider主要是首页的轮播图，还有

按钮栏

这一块。比如这里，模板与样式如下，中间画框的部分，是引用自element.scss里的，只要传入一个row方向，就能达到目的

模板块
布局块
编写的模板
编写的模板2

---

组件说明

首页对应的是index.vue是入口文件，把所有的组件聚合起来。
引入对应的组件，然后注册，模板部分按照出现的顺序依次引用。

index.vue

想增加还是删除，将对应的组件添加或删除就行了。层次分明，比较干净，不涉及任何业务内容，但是控制所有的布局，这是入口文件的作用。
具体的组件，比如slider组件。

模板分成两部分
结构上是引用一个抽象的设计组件。
引用抽象的设计组件
core中的slider.vue是一个壳，不涉及任何业务内容的。内容由模板中的:items="items"传进去的，真正的items内容是这一块：
items数据

所以core中的slider.vue的设计就非常干净，解耦。
在真正的业务组件hslider.vue中，只需要调用一下之前抽象的设计组件，然后将数据传入进来。

调用组件

这样维护起来就很容易了。