因為畢業設計要做基於Node服務器的項目，所以我就想着用剛學的vue作為前端開發框架，vue作為Vue.js應用程序的狀態管理模式+庫，axios基於promise用於瀏覽器和node.js的http客戶端，koa框架是node.js的框架，主要開發后台代碼。編輯器用的是Visual Studio Code，這里就不講如何創建vue項目了，度娘有一大堆。當然此項目的前提是本地安裝了node和npm。
一、項目結構
二、安裝框架
1、在front-end目錄下安裝如下
npm install --save vuex axios vue-router
2、在back-end目錄下安裝如下
npm install --save koa
三、vue-router
首先在目錄 /src/router/index.js 引入vue-router和編寫路由器，語法可查閱詳細的文檔：https://router.vuejs.org/zh/ ，代碼具體如下：
四、axios
因為涉及到的接口較多，所以這里在目錄 /src/utils/request.js 對axios進行封裝，封裝的內容如下：
五、vuex
這里也不講語法了，詳細語法看文檔：https://vuex.vuejs.org/
1、在 /src/vuex/interface/admin.js 中引入剛剛所寫的axios封裝代碼，然后統一導出接口，代碼如下所示：
2、在 /src/vuex/mudules/admin.js 中寫vuex代碼，並導出，代碼如下：
3、頁面中的步驟
（1）首先引入vuex模塊的方法
（2）分發action ，和store.dispatch()是一樣的
（3）最后直接調用接口
注意的是要在main.js引入store，不然會報沒有dispatch方法的錯誤，如下所示：
六、koa 和 koa-router
koa是node.js的框架，這里只寫很簡單的接口，接口的代碼如下：
七、配置環境
1、在 /front-end/config/index.js 目錄配置目標服務器的ip地址，如下所示：
還要在package.json 文件中 把inline改為host 0.0.0.0 （因為是本地的服務器），如下：
八、啟動項目
可以在vs code同時開啟2個cmd命令行，如下
1、前端啟動vue項目
npm run dev
2、后台啟動koa服務
npm start
九、效果
最后接口傳過來的數據如下，perfect！
