API的部分我們都已經處理一個粗略的輪廓出來了，接下來我們就要來建置一下一個管理的後台頁面，由於想要做成前後端分離因此選定好模板之後我們會來進行串接，但首先我們要先來看看我們的模板鳩竟會長怎麼樣呢？

Vue-admin-template

這個模板是我目前在使用的一個方案，一個後台前端的解決方案，個人是覺得彈性很好，而且是使用vue進行開發(剛好也可以把學習觸手再延伸?)，他有提供一個示範的頁面如下：

• 精簡版
• 完整示範
  那麼很多功能其實都提供了範例，說實在抄抄寫寫大概也能弄出一個很像樣的後台了，至於很多客製化的部分也能自己深入去研究一下，那麼這邊就先來把專案給拉下來並且設置到可以開發的階段吧。

初始配置方法

1. 將專案拉下

git clone https://github.com/PanJiaChen/vue-admin-template.git
cd vue-admin-template

2. 安裝所有npm 套件

npm install

3. 開啟方式&包版方式

# develop 模式
npm run dev

4. 接著就可以透過 http://localhost:9528去看到跟測試頁面一樣的內容了

包版方法

接續上面的第三點，執行npm run build:prod之後就會在專案的跟目錄底下產生dist裡面就包含了包版起來的內容(如下圖紅箭頭所示)。

那麼產出的這個東西我們要放在哪裡呢？下一章我們就要來看看如何部屬這個包好的後台。