承接前文，本文介绍将api的接口封装抽离，进一步模块化axios。同时引入Element-ui样式库，进行对导航栏的重构。本系列文章目录：Vue实战目录——vue+router+vuex+axios从零实现新闻详情页

本项目代码地址：

https://gitee.com/vuejslearn/news-list.git

引入代理数据

一般前后端开发，接口定义好，数据结构定义好后。就开始分头行动了，这时候是没有写好的api接口的，这就需要我们前端先定义一个测试用的代理数据，代理数据的结构与正式的后端返回的是一样的，不同的是，它是临时的，我们自己测试用的。接下来，我就来介绍，如何添加代理数据。

首先，在项目的public文件夹里，我们新建文件夹：api。这个目录api，就是将来我们放代理数据的总目录。

然后，我们新建json文件：newsList.json。用来放新闻列表的代理数据。我们将获取新闻列表的接口返回的数据(json数组形式的数据)，复制到newsList.json里，这样就成了一个代理数据了。那怎么访问呢？很简单，我们启动项目，浏览器地址栏里输入：

http://localhost:8001/dev/api/newsList.json

我们看到了之前保存的新闻列表数据

这样，我们在接下来的api接口里，就可以写上面的地址为接口了。

抽离API接口

在util文件里，我们新建一个js文件：api.js文件，将来我们的 接口都放在这里，统一管理。代码中只需要引用这里的接口接口，这样就做到了代码与接口的分离。

这样做的好处是解耦合，前后端分离式开发时，我们与后端进行联调，接口可能会变化，统一管理，会方便我们对接口的管控，修改起来会很方便。后期恢复迭代更轻松。

首先我们先创建基础路径，这个使我们项目所有的接口的基础前缀。具体的语句为：

const baseUrl = 'http://localhost:' + process.env.VUE_APP_PORT + process.env.VUE_APP_BASEURL

还记得之前说过的关于环境变量的文章吗？在这里就用到了。当然，这里还可以继续优化，可以把localhost放到环境变量里，这里就不阐述了。

之后，我们将api.js文件注入到main.js中，供全局使用。

import api from './util/api.js'
Vue.prototype.$api = api

然后，我们开始动手抽离新闻列表页的接口了。

首先，api.js里添加新闻列表代理数据的接口：

const newsList = baseUrl + '/api/newsList.json'

然后导出：

export default {
 newsList
}

这样，全局就可以通过

this.$api.newsList

来进行引用了。修改我们的新闻列表页，获取数据的方法：

getData () {
 this.$get(this.$api.newsList).then((resp) => {
 this.newsArray = resp
 })
 }

同理，我们再做一个详情页的代理数据，用来测试。

首先，还是在public目录下，创建名称为1的文件夹，然后在里面创建一个名称detail的json文件，用来放我们的详情页数据。完成后，启动项目：

可以看到访问路径是restful风格的。这样就是我们常见的前后端分离开发的基本套路了。

然后我们在api.js里添加详情页的接口并导出。

const newsDetail = baseUrl + '/api/1/detail.json'

export default {
 newsList,
 newsDetail
}

之后，我们修改新闻列表页跳转到详情页的方法：

ok，这样我们的api接口抽离就算完成了，之后再添加数据，接口，就按照这个套路进行添加。

引入Element-ui

接下来，我们引入Element-UI库来对我们丑陋的导航栏进行重构，让它更漂亮一点。

引入方法很简单。首先是安装：

npm install element-ui --save

然后引入到代码中，在main.js中，我们引入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

这样，就算引入的Element-ui库了。下篇文章我们介绍如使用Element-UI重构导航栏，放个图片先睹为快吧：

原创不容易，鉴于本人水平有限，文中如有错误之处欢迎大家指正。以后我会持续发布vue实战系列的文章，喜欢的朋友欢迎关注。

推荐阅读：手机cpu性能排行