本專案程式碼地址：

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實戰系列的文章，喜歡的朋友歡迎關注。