ok，这章讲下地址列表，我们使用有vant组件来快速完成这部分的功能。
Github：https://github.com/Ewall1106/mall
1、写在开头
- 关于vant组件的安装及引入的请移步：有赞Vant组件库的引入；
- 对于地址列表我们使用AddressList地址列表组件，大家可以去官网看看这个组件的基础用法；
- 先看看最终的一个效果：
地址列表
2、使用AddressList
（1）首先我们在main.js中引入并注册这个组件。
main.js中注册及引入
（2）然后我们再去页面中使用这个组件
- 我们把官网中的实例代码复制到我们的
address.vue文件中，修改部分API参数：
使用Addresslist组件
- 就这么简单，我们看看页面的初步呈现效果 ：
地址列表初步呈现效果
3、改变颜色
（1）关于颜色的改变前面在做轮播图的时候我们已经处理过，当时我们的解决方法是用在开发中工具中找到它的class类名，然后我们使用vue的穿透选择器改变这个类名的基本样式，从而实现样式的覆盖。
（2）这里我们说另一种更好方法
- 我们去vant官网定制主题中可以看到，官网是这样说的：
Vant提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。
- 那么，什么是BEM？
其实这个我理解的也不是很透彻，不过大概就是一种设计思想，将css的命名进行了规范，然后就是抽离了css样式文件，一个样式对应一个html块，我这里丢两篇文章，大家可以看看：
CSS BEM 书写规范
如何看待 CSS 中 BEM 的命名方式？
（3）ok，到这里我们就要改变这个组件的样式，怎么做？
- 首先，我们新建一个
overiride.css文件，专门用于覆盖组件的样式； - 然后，我们F12打开开发者工具，看看这个
AddressList.vue的√图标类名；
F12开发者工具
- 同理，改变底部button颜色为我们的主体色也是如此：
override.css的内容
- 然后我们在
main.js中引入这个css文件
main.js中引入override.css
4、小结
这就是我们的地址列表了基本结构了，借助vant的AddressList组件，我们可以快速的完成地址列表的功能；其次就是改变主题的颜色了，你也可以自己去官网看看其他的方法，也可以自己定制一套，大家感兴趣就自己去折腾了。
参考学习
有赞Vant组件库的引入
AddressList地址列表
CSS BEM 书写规范
如何看待 CSS 中 BEM 的命名方式？
网友评论