Vue CLI 3.0腳手架如何mock數據

developerworks 發布于2019-08-26 13:25 / 3073人閱讀

摘要：的文件結構的文件結構可以看到版本的腳手架在項目結構上精簡了很多，看上去沒有那么的繁瑣。配置完成之后，我們也是和上述一樣，在項目中直接訪問數據即可。

前后端分離的開發模式已經是目前前端的主流模式，至于為什么會前后端分離的開發我們就不做過多的闡述，既然是前后端分離的模式開發肯定是離不開前端的數據模擬階段。

我們在開發的過程中，由于后臺接口的沒有完成或者沒有穩定之前我們都是采用模擬數據的方式去進行開發項目，這樣會使我們的前后端會同時的進行，提高我們的開發效率。

因為最近自己在自學 Vue 也在自己擼一個項目，肯定會遇到使用數據的情況，所以就想著如何在前端做一些 mock 數據的處理，因為自己的項目使用的是 vue/cli 3.0 與 vue/cli 2.0 的使用有一些的不同，所以在這里記錄一下。

注意：本文主要說的是如何配置本地靜態文件的 mock 數據的方式

首先我們來說一說vue/cli 3.0 與 2.0 的一些不同：

3.0 移除了 static 文件目錄，新增了 public 目錄，這個目錄下的靜態資源不會經過 webpack 的處理，會被直接拷貝，所以我們能夠直接訪問到該目錄下的資源。

3.0 移除了 config、build 等配置目錄，如果需要進行相關配置我們需要在根目錄下創建 vue.config.js 進行配置即可。

2.0 的文件結構

3.0 的文件結構

可以看到 3.0 版本的腳手架在項目結構上精簡了很多，看上去沒有那么的繁瑣。接下來我就進行 mock 數據的配置，再說 3.0 之前，我們先看看 2.0 的時候我們都是怎么使用靜態數據文件進行 mock 的。

2.0 配置

首先，在這個版本是只有我們的 static 目錄下的文件是可以被訪問到的，所以我們就把靜態文件放入該目錄下。

// 靜態數據存放的位置
static/mock/home.json

我們啟動項目之后一般項目會啟動在 8080 端口，如果不是修改下對應端口號即可，我們訪問下面地址：

http://localhost:8080/static/mock/index.json

我們可以看到我們的數據是可以請求到的，之后我們只需要在項目中 config/index.js 添加如下屬性：

dev: {
    // Paths fiddler charles
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/api": {
        target: "http://localhost:8080",
        pathRewrite: {
          "^/api": "/static/mock"
        }
      }
    }
}

之后我們在項目中使用即可，我們就能獲取我們需要的數據。

axios
 .get("/api/index.json")
 .then(this.handler)

3.0 配置

因為 static 目錄移除，我們把靜態文件放入 public 文件下。

// 靜態數據存放的位置
public/mock/home.json

和上面一樣，啟動項目后我們看看數據能不能正常被訪問。

http://localhost:8080/mock/home.json

之后，不同的地方在于，我們需要手動創建一個 vue.config.js 文件放在根目錄下。

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8080",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/mock"
        }
      }
    }
  }
}

配置完成之后，我們也是和上述一樣，在項目中直接訪問數據即可。

axios
 .get("/api/home.json")
 .then(this.handler)

總結

以上我們就學會了如何在 vue/cli 3.0 的項目中進行 mock 數據

如果你覺得本文對你有幫助，歡迎轉發，點贊

本文作者是個小白，如有不足，歡迎留言指正。
關注微信公眾號：六小登登。領取全套學習資源

云服務器 GPU云服務器 vue-cli vue-cli3 js mock數據 js的mock數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108802.html

Vue+Express全棧購物商城

摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。服務端技術棧登錄授權用認證機制，來實現登錄登出。服務器配置和緩存策略，根據不同的來代理。申請證書全站升級到，配置的協議。一、前言提綱基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。二、歷史版本基于Vue-CLI2.0:點我查看這個分支版本是一兩年前...

Richard_Gao 2019-05-22 18:23 評論0 收藏0
Vue+Express全棧購物商城

摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。服務端技術棧登錄授權用認證機制，來實現登錄登出。服務器配置和緩存策略，根據不同的來代理。申請證書全站升級到，配置的協議。一、前言提綱基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經驗和技巧。二、歷史版本基于Vue-CLI2.0:點我查看這個分支版本是一兩...

luzhuqun 2019-08-26 13:50 評論0 收藏0
vue開發規范

摘要：項目結構公共資源公共資源全局樣式公共組件布局模擬數據項目模塊模塊模塊頁面模塊路由插件公共路由全局狀態公共方法主視圖主程設置靜態資源配置文件開發規范語義化命名使用駝峰式命名，文件命名不宜過長，路由的命名和文件命名保持一致。背景由于saas平臺即將開始，現在重新梳理前端架構和開發規范，項目使用模塊化思想搭建，每個模塊都有自己都路由和方法，盡量做到刪除和添加模塊，不會對框架產生較大對影響...

selfimpr 2019-08-23 12:55 評論0 收藏0
VueCli3.0中集成MockApi

摘要：缺點需要增加本地的代碼量，以及需要配置實現攔截優點數據通過會更豐富。缺點修改內容溝通成本高，跟后端扯皮利用去模擬優點可控內容以及實現動態。三本地周邊知識本地的思想就是利用完成。注意接口的和自己的接口不要沖突。 VueCli3.0中集成MockApi 一：使用場景哎喲，好煩啊，這個需求還么結束就來下一個需求，程序員不要排期的嗎？沒辦法啊，資本主義的XX嘴臉啊來吧，技術評審我倆把接口...

劉玉平 2019-08-26 13:59 評論0 收藏0
搭建vue+webpack+mock腳手架（一）

摘要：前言倉庫地址本文適合第一次搭建項目的朋友，講講我是怎么從零開始摸索著搭建一個項目框架的，屬于總結歸納性質的文章。前言倉庫地址：https://github.com/miaomiaozh... 本文適合第一次搭建項目的朋友，講講我是怎么從零開始摸索著搭建一個項目框架的，屬于總結歸納性質的文章。基于vue的多頁應用支持自定義mock數據支持熱加載 js打包成多個項目結構介紹...

waltr 2019-08-21 11:29 評論0 收藏0