這段時間研究了 Vue 和 Koa2，想把二者結合起來，Vue 作為前端框架，Koa2 作為后端框架，如何打通前后端的數據通過，需要解決跨域問題，現將其中的一些關鍵配置記錄下來，供大家參考：
本篇文章主要內容：
· 新建 Vue 前端項目
· 新建 Koa2 后端項目
· 解決跨域問題，實現前端接收后端發來的數據
教程所用的項目目錄名稱（名稱可以任意）：
|-- vue-mall-mobile
|-- mall //Vue 前端目錄
|-- mall-server //Koa2 后端目錄
1、新建 Vue 項目
1.1 首先，我們通過命令行，將目錄切斷到 vue-mall-mobile 下，用官方的 Vue-Cli 生成項目目錄：
npm install -g @vue/cli //安裝Vue CLI
vue create mall //創建項目
1.2 選擇這幾個常用的組件：
接下來選擇 "Use the history mode for the router" ，選擇 "ESLint + Airbnb config" 和 "Lint on save" ，最后，選擇 “In package.json” 選項，以便將配置放置在 package.json 文件中，而不是單獨的配置文件中。
1.3 項目生成完畢后，我們運行：
cd mall
npm run serve
我們打開瀏覽器，輸入 localhost:8080，出現如下界面，說明我們的 Vue 項目已經新建完成。
1.4 我們來看一下新生成的項目目錄：
目錄簡析：
App.vue --根組件，類似於 index.html，用於整合其他組件，將它們一起呈現出來
main.js --應用程序入口點，用於加載和初始化 Vue 以及其他的插件等
store -- Vuex 目錄
components --自定義組件存放地點
router -- Vue-Router 目錄
2、新建Koa2項目
koa 是一個基於 Node.js 平台的新一代 Web 應用開發框架，由 Express 幕后的原班人馬打造，目前最新版本是 koa2 。
2.1 在命令行下運行如下命令，用 npm 安裝 koa-generator
npm install koa-generator -g //用koa-generator生成項目目錄
2.2 然后切換到 vue-mall-mobile 目錄下，執行：
koa2 mall-server
此時，我們打開 mall-server 目錄，可以看到已經自動生成了項目目錄：
2.3 安裝項目依賴：
cd mall-server
npm install
安裝完畢后，我們再次查看項目目錄，會發現多了一個 node_modules 文件夾：
此時運行項目：
npm run dev
運行成功之后，打開瀏覽器，訪問： localhost:3000，出現如下頁面，證明 koa2 已經部署成功。
3、配置二者結合
3.1 mall-server 項目配置：
3.1.1 因為前端 Koa2 用的是 3000 端口，后端 Vue 用的是 8080 端口，兩者端口不一樣，前端就無法直接獲取后端的數據，也就是跨域訪問。 為了解決解決跨域的問題，需要安裝 koa2-cors ：
npm install koa2-cors
3.1.2 修改 mall-server\app.js :
const cors = require('koa2-cors'); //添加
app.use(cors({ origin: function(ctx) { return ctx.header.origin }, // 允許發來請求的域名 allowMethods: [ 'GET', 'POST', 'PUT', 'DELETE', 'OPTIONS' ], // 設置所允許的 HTTP請求方法 credentials: true, // 標示該響應是合法的 }));
將上面兩端代碼添加到 app.js 中。
3.1.3 修改 mall-server/routes/users.js :
router.get('/sendText', function (ctx) { // /sendText為前端請求api ctx.body = 'this is a Text' })
將上面代碼添加到 users.js 里，‘this is a Text’ 為 /sendText 路由的響應。
3.2 mall 項目配置：
3.2.1 在 mall 目錄下 新建文件 vue.config.js ,粘貼下列代碼：
module.exports = { publicPath: './', lintOnSave: false, devServer: { host: '0.0.0.0', port: 8080, proxy: 'http://localhost:3000' //設置代理 } }
proxy 屬性尤為關鍵，它完成了一件事情，將默認的請求地址中的 localhost:8080 轉換成了 localhost:3000 ,也就是 Koa2 后端的默認地址，從而可以實現接收來自后端發送過來的數據。
注：Vue-CLi 默認是不存在 vue.config.js 文件的，需要添加個性化配置時，是需要我們新建的，詳細的配置參考，在 Vue-CLi 的主頁，配置參考頁面下。
3.2.2 安裝 axios，用於處理跨域請求：
npm install axios
3.2.3 在 mall\src 目錄下 新建文件夾 api ，並新建 index.js，輸入代碼：
class Ajax{ sendText() { axios.get('/users/sendText').then((res) => { console.log(JSON.stringify(res)) }) } }
此時，我們查看瀏覽器控制台信息：
打印出來的消息，就是我們后端發送過來的。
OK，到這里就實現了 Vue + Koa 的入門操作，有問題的小伙伴歡迎留言交流。