成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vue CLI 3.0腳手架如何mock數(shù)據(jù)

developerworks / 3098人閱讀

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

前后端分離的開發(fā)模式已經(jīng)是目前前端的主流模式，至于為什么會(huì)前后端分離的開發(fā)我們就不做過多的闡述，既然是前后端分離的模式開發(fā)肯定是離不開前端的數(shù)據(jù)模擬階段。

我們?cè)陂_發(fā)的過程中，由于后臺(tái)接口的沒有完成或者沒有穩(wěn)定之前我們都是采用模擬數(shù)據(jù)的方式去進(jìn)行開發(fā)項(xiàng)目，這樣會(huì)使我們的前后端會(huì)同時(shí)的進(jìn)行，提高我們的開發(fā)效率。

因?yàn)樽罱约涸谧詫W(xué) Vue 也在自己擼一個(gè)項(xiàng)目，肯定會(huì)遇到使用數(shù)據(jù)的情況，所以就想著如何在前端做一些 mock 數(shù)據(jù)的處理，因?yàn)樽约旱捻?xiàng)目使用的是 vue/cli 3.0 與 vue/cli 2.0 的使用有一些的不同，所以在這里記錄一下。

注意：本文主要說的是如何配置本地靜態(tài)文件的 mock 數(shù)據(jù)的方式

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

3.0 移除了 static 文件目錄，新增了 public 目錄，這個(gè)目錄下的靜態(tài)資源不會(huì)經(jīng)過 webpack 的處理，會(huì)被直接拷貝，所以我們能夠直接訪問到該目錄下的資源。

3.0 移除了 config、build 等配置目錄，如果需要進(jìn)行相關(guān)配置我們需要在根目錄下創(chuàng)建 vue.config.js 進(jìn)行配置即可。

2.0 的文件結(jié)構(gòu)

3.0 的文件結(jié)構(gòu)

可以看到 3.0 版本的腳手架在項(xiàng)目結(jié)構(gòu)上精簡了很多，看上去沒有那么的繁瑣。接下來我就進(jìn)行 mock 數(shù)據(jù)的配置，再說 3.0 之前，我們先看看 2.0 的時(shí)候我們都是怎么使用靜態(tài)數(shù)據(jù)文件進(jìn)行 mock 的。

2.0 配置

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

// 靜態(tài)數(shù)據(jù)存放的位置
static/mock/home.json

我們啟動(dòng)項(xiàng)目之后一般項(xiàng)目會(huì)啟動(dòng)在 8080 端口，如果不是修改下對(duì)應(yīng)端口號(hào)即可，我們?cè)L問下面地址：

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

我們可以看到我們的數(shù)據(jù)是可以請(qǐng)求到的，之后我們只需要在項(xiàng)目中 config/index.js 添加如下屬性：

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

之后我們?cè)陧?xiàng)目中使用即可，我們就能獲取我們需要的數(shù)據(jù)。

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

因?yàn)?static 目錄移除，我們把靜態(tài)文件放入 public 文件下。

// 靜態(tài)數(shù)據(jù)存放的位置
public/mock/home.json

和上面一樣，啟動(dòng)項(xiàng)目后我們看看數(shù)據(jù)能不能正常被訪問。

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

之后，不同的地方在于，我們需要手動(dòng)創(chuàng)建一個(gè) vue.config.js 文件放在根目錄下。

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

配置完成之后，我們也是和上述一樣，在項(xiàng)目中直接訪問數(shù)據(jù)即可。

axios
 .get("/api/home.json")
 .then(this.handler)
總結(jié)

以上我們就學(xué)會(huì)了如何在 vue/cli 3.0 的項(xiàng)目中進(jìn)行 mock 數(shù)據(jù)

如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)發(fā)，點(diǎn)贊

本文作者是個(gè)小白，如有不足，歡迎留言指正。
關(guān)注微信公眾號(hào)：六小登登。領(lǐng)取全套學(xué)習(xí)資源

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108802.html

相關(guān)文章

  • Vue+Express全棧購物商城

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

    Richard_Gao 評(píng)論0 收藏0

  • Vue+Express全棧購物商城

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

    luzhuqun 評(píng)論0 收藏0

  • vue開發(fā)規(guī)范

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

    selfimpr 評(píng)論0 收藏0

  • VueCli3.0中集成MockApi

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

    劉玉平 評(píng)論0 收藏0

  • 搭建vue+webpack+mock腳手架（一）

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

    waltr 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<