一、vue-cli 2.0
1. 安装axios插件
npm指令：npm install axios --save
yarn指令：yarn add axios
2. 在组件中引入，可以在单个组件中引入，只请求该组件所需要的数据，也可以在父组件中引入，请求该父组件下所有子组件需要的数据
在mounted周期函数中执行方法A，方法A是在methods对象中定义的，该方法的功能是：让axios对象调用get（）方法和then（）方法，get方法是获取数据的地址url，then方法是对获取的数据进行处理，通过自定义方法B进行数据处理
3. 关于mock的假数据：
放在static文件夹下，因为src文件可以访问同级的static文件。
同时，开发环境下的url地址应该和线上环境下的url地址一样，我们要保证线上的代码是完全正确的，决不能再修改已经提交到master上的代码，那么我们需要做一个url的设置，当时开发环境的时候，加载本地模拟的数据，当时线上环境时，加载的就是服务器中的数据，且要保证url是线上地址。
4. 数据结构：
{"ret": true,"data": {"medicine": [{"id": "0001","spell": "nanxin wanfeile","name": "男性 万斐乐"},{"id": "0002","spell": "nanxin jinge","name": "男性 金戈"},{"id": "0003","spell": "nanxin hexin","name": "男性 和欣"},{"id": "0004","spell": "nanxin wanaike","name": "男性 万艾可"},{"id": "0005","spell": "nanxin guilingji","name": "男性 龟龄集30粒"},{"id": "0006","spell": "nanxin suoyangbushenjiaonang","name": "男性 锁阳补肾胶囊"},{"id": "0007","spell": "nanxin nanbaojiaonang","name": "男性 男宝胶囊30粒"},{"id": "0008","spell": "nanxin yubiaobushenwan","name": "男性 鱼鳔补肾丸"},{"id": "0009","spell": "nanxin jinsuogujingwan","name": "男性 金锁固精丸"},{"id": "00010","spell": "nanxin shengjingpian","name": "男性 生精片"}]}}
二、vue-cli3.0
1. 新建文件：vue.config.js，该文件与package.json同级。vue.config.js是一个可选的配置文件，如果项目的 (和package.json同级的) 根目录中存在这个文件，那么它会被@vue/cli-service自动加载。你也可以使用package.json中的vue字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
2. vue.config.js中的代码：
（1）通过required寻找数据路径，并将其引入。
（2）在devServe对象中设置端口port
（3）在DevServe对象中的before函数，参数为app，这是个对象，app调用get方法，意思是：当请求“/api/search”路径的时候，得到的是mockData的数据
const mockData = require("./mock/search.json");module.exports = {//... devServer: {port: 8080,before(app) {app.get("/api/search", (req, res) => {res.json(mockData);});}}};
3. 组件中进行数据请求：
created () {axios.get('/api/search').then(ref => {console.log(ref);})}
结果：
