用Vue、element-ui、axios实现省市区三级联动

现在大部分电商的网站、app都需要用户或者管理者去选择设置地区等位置信息。下面我就介绍一下前端开发者用vue，axios，element-ui开发一个省市区三级联动的组件。

VX号:  J_T514

这是我的微信公众号全是技术文章：

1.准备工作，首先我们需要全中国的省市区资源的json数据（科普一下：前六位数字是身份证前六位）

2.搭建vue-cli,安装axios,element-ui,创建vue，webpack项目

    1).

    在控制台或者终端执行以下代码，其中只需要路由（y），其他e2e，eslint这些不需要(y)

    vue init webpack threelink

    cd threelink

    npm run dev

    把没用的组件删除，重新创建组件

  npm install axios --save ,安装axios

    npm i element-ui -S(这是缩写) , 安装element-ui   

    2).

    在项目threelink->src->main.js里面添加，调用element-ui插件得代码

// 加载element_ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

    3).在static下创建json文件夹，文件夹里面放map.json,就是全国地址的数据信息，目录结构如下

        

3.基本步骤都已经ok,下面我们开始写前端界面代码.

    上element-ui官网，找到选择器select