成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

developerworks / 3144人閱讀

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

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

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

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

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

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

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

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

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

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

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

2.0 配置

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/108802.html

相關(guān)文章

  • Vue+Express全棧購物商城

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

    Richard_Gao 評論0 收藏0

  • Vue+Express全棧購物商城

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

    luzhuqun 評論0 收藏0

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

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

    selfimpr 評論0 收藏0

  • VueCli3.0中集成MockApi

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

    劉玉平 評論0 收藏0

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

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

    waltr 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<