中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

詳解Vue CLI 3.0腳手架如何mock數據

發布時間:2020-09-02 17:55:16 來源:腳本之家 閱讀:124 作者:Modeng 欄目:web開發

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

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

因為最近自己在自學 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 的文件結構

詳解Vue CLI 3.0腳手架如何mock數據

3.0 的文件結構

詳解Vue CLI 3.0腳手架如何mock數據

可以看到 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 數據,希望對大家的學習有所幫助,也希望大家多多支持億速云。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

雷州市| 南丰县| 拉萨市| 灵寿县| 沙湾县| 扎囊县| 南靖县| 普洱| 沂源县| 阿拉尔市| 平度市| 和硕县| 怀宁县| 永福县| 神木县| 印江| 米泉市| 昌都县| 广安市| 桃江县| 济南市| 贵溪市| 洞头县| 紫云| 乐陵市| 舟山市| 英吉沙县| 长汀县| 游戏| 洛隆县| 梨树县| 梁河县| 旌德县| 榕江县| 巴彦淖尔市| 永春县| 荆州市| 察隅县| 灵丘县| 会同县| 宁乡县|