前言：上章我们借助vant的AddressList列表组件实现了地址列表页面的快速编写，同样，这一章节我们还是借助vant组件，快速完成新增地址的编辑功能页面。
Github：
https://github.com/Ewall1106/mall 首先我们来看看地址编辑页面的效果：
地址编辑页面效果展示
1、新建地址编辑页面
（1）跟以前一样，我们复制一份我们已经初始化好了的
test.vue
页面重命名为
addressEdit.vue
页面开始初始化。
关于文件名字规范这里提一句，大家可以参考一下我写的
关于vue的命名规范（2）路由添加，老规矩还是去
router
的
index.js
中添加
addressEdit
路由
（3）为地址列表
address.vue
添加路由跳转到该页面。
截图来自vant官网
根据文档中的描述，我们可以知道为
add事件
添加路由跳转：
在address.vue页面中添加跳转事件
至此，
addressEdit.vue
页面的初始化工作基本就完成了。
2、引入vant地址编辑组件
（1）首先在
main.js
中引入
AddressEdit 地址编辑并注册：
import { AddressEdit } from 'vant';
Vue.use(AddressEdit);
（2）然后我们去页面中使用复制一份官网中的示例代码到
addressEdit.vue
页面中，稍作一些修改：
addressEdit.vue
3、省市区地址选择
（1）对于上面的
areaList
对象我们需要赋予一份完整的省市区列表数据
- 大家可以看看vant的 Area 省市区选择 的介绍；
- 而vant也为我们提供了这份 省市区列表数据 。
（2）于是我们可以下载这份文件，然后在
assets
资源文件夹中新建一个
area.js
用于存放这份数据并在页面中引入。
在页面中新建area.js
引入area.js
这样，我们就实现了省市区的选择。
省市区的选择
4、优化及小结
- 最后，我们需要还是需要改变下按钮的颜色，还是进入我们上一章创建的
override.css
override.css
- 到这里，我们地址填写的基本功能就已经实现了，是不是很快，当然你也可以自己写，但是我觉得作为一名程序员，应该要把更多的精力放在页面的逻辑或者是前后端整个项目的逻辑上，至于页面交互等效果，什么解决方式越快就用什么，所以，我觉得使用组件库来完成我们的需求是一个很好的"捷径"。
参考学习：
我的博客即将入驻“云栖社区”，诚邀技术同仁一同入驻。