使用 Mirage 設定 Vue 應用程式進行開發

模擬您的 Vue 應用程式的網路程式碼，讓您無需任何後端服務即可開發您的 Vue 應用程式。

這是為熟悉 Mirage 的人提供的快速入門指南。如果您是 Mirage 的新手，請查看概觀。

步驟 1：安裝 Mirage

首先，請確保您已安裝 Mirage

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

步驟 2：定義您的伺服器

建立一個新的 server.js 檔案並定義您的模擬伺服器。

這是一個基本範例

// src/server.js
import { createServer, Model } from "miragejs"

export function makeServer({ environment = "development" } = {}) {
  let server = createServer({
    environment,

    models: {
      user: Model,
    },

    seeds(server) {
      server.create("user", { name: "Bob" })
      server.create("user", { name: "Alice" })
    },

    routes() {
      this.namespace = "api"

      this.get("/users", (schema) => {
        return schema.users.all()
      })
    },
  })

  return server
}

在 Vue CLI 中，將此檔案放在 src/server.js 中，以便對其進行的變更會觸發重新建置。

步驟 3：在開發中使用您的伺服器

開啟您的 Vue 應用程式的引導檔案（在 Vue CLI 中為 src/main.js），匯入您的 makeServer 函式，並在開發環境中呼叫它

// src/main.js
import Vue from "vue"
import App from "./App.vue"
import { makeServer } from "./server"

Vue.config.productionTip = false

if (process.env.NODE_ENV === "development") {
  makeServer()
}

new Vue({
  render: (h) => h(App),
}).$mount("#app")

現在，每當您的應用程式在開發中發出網路請求時，Mirage 都會攔截該請求，並使用您伺服器定義中的資料進行回應。

例如，假設上述伺服器定義，以下元件會提取我們在 seeds 中定義的使用者 Bob 和 Alice

<!-- src/App.vue -->
<template>
  <ul id="users">
    <li v-for="user in users" v-bind:key="user.id">{{ user.name }}</li>
  </ul>
</template>

<script>
  export default {
    name: "app",

    data() {
      return {
        users: [],
      }
    },

    created() {
      fetch("/api/users")
        .then((res) => res.json())
        .then((json) => {
          this.users = json.users
        })
    },
  }
</script>

您現在可以繼續開發您的 Vue 應用程式，並在進行過程中使用 Mirage 模擬您的後端 API 端點。