使用express配合rap配置vue本地開發環境

Guoch發表於2017-11-01
ExpressVue開發環境


前言

　　近期在做 vue 單頁專案，採用的開發方式是前後端分離的模式。後端只提供介面，前端負責資料獲取與展現，介面文件寫在 rap 上，它是一個視覺化介面管理工具 通過分析介面結構，動態生成模擬資料，校驗真實介面正確性， 圍繞介面定義，通過一系列自動化工具提升我們的協作效率。
　　基礎的vue專案結構是用 vue-cli 腳手架生成的，在 config 資料夾中新增了一個請求代理配置檔案 proxy-config.js 。
　　在 rep_server 資料夾的 config-rap.js 檔案中配置專案ID => projectId,rap專案ID獲取如下：

技術點

　　node + express + vue，專案地址，歡迎star

總體描述

  • 介面統一管理
  • 支援跨域訪問
  • mock 資料與測試環境分離

專案執行

　　git clone https://github.com/Guoch0526/vue-mock-demo.git

　　cd vue-mock-demo

　　npm install

　　// 安裝好依賴之後,找到 rap_server 資料夾中的 config-rap.js, 替換為你的rap專案基本配置

　　// 介面統一寫在 src/api-irls/index.js 中, 最後：

　　npm run start複製程式碼

  • 之後在命令列工具中你會看到:

  • 如果瀏覽器顯示：

那就說明你已經成功獲取到資料了

專案總體結構

├── build                                       // webpack配置檔案
├── config                                      // 專案(代理)配置
├── rap_server                                  // rap伺服器配置
├── src                                         // 資源目錄
│   ├── api-urls                                // 介面配置
│   ├── assets                                  // 公共資源
│   ├── components                              // 元件
│   ├── router                                  // 頁面路由
│   ├── App.vue                                 // 頁面入口檔案
│   ├── main.js                                 // 程式主入口
├── package.json                                // 包
├── index.html                                  // 入口html檔案複製程式碼

相關文章