本章我们开始讲购物车结算页面的编写，这个页面应该是整个项目里最复杂的页面了，ok，这章讲下基本结构。
Github：https://github.com/Ewall1106/mall（请选择分支chapter28）
1、新建购物车页面
（1）老规矩，复制一份我们已经写好的test.vue页面初始化我们购物车页面cart.vue
购物车页面构建
（2）然后就是去注册下路由
这里就不废话了占据篇幅了，这个应该很easy了。
2、顶部导航栏
（1）顶部的第一个块就是导航栏了，跟前面的一样，没什么难点的了。
导航栏
然后就是添加几个前进后退的事件，我这里就直接复制前面章节中商品详情页里的头部了，其实，这里你也可以把部分抽离成一个组件从而实现复用，我就懒得抽了。
3、收货地址块
（1）重点说下收货地址这部分内容的实现，首先快速写下html和css完成基本布局：
收货地址
css就是一些简单的flex布局及阿里巴巴icon-font的运用，不贴代码了。完成的基本效果：
基本头部效果
（2）然后我们需要跳转到一个新页面完成地址选择功能，所以我们再新建一个address.vue页面
同上，复制一份我们test.vue重命名为address作为我们的地址选择页面；
注册路由
4、小结
这章就是完成了购物车结算页面的部分布局，下一章我们去adress.vue中借助vant组件实现地址选择功能，然后我们在返回到这个页面来完成我们剩下的功能。
作者：Ewall_
链接：https://www.jianshu.com/p/0c309ba9315a
随时随地看视频
