使用 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 端点。

下一步

Vue Test Utils