承接前文，本文介紹將api的接口封裝抽離，進一步模塊化axios。同時引入Element-ui樣式庫，進行對導航欄的重構。本系列文章目錄：
本項目代碼地址：
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實戰系列的文章，喜歡的朋友歡迎關注。
閱讀更多 溫馨的醬牛肉 的文章
