preface

This article focuses on the use of the Mock data plug-in.

Previous post portal

Build Vite2+Vue3 Family barrel from zero (3)

scenario

In a development scenario where the front and back end are separated, there is usually a problem that the back-end interface is not yet developed, and the front end has written the page, and you need to wait for the backend sibling to provide the interface and interface documentation before you can continue to develop the syndication.

To solve this problem, the front-end can now mock the back-end interface in advance for interface debugging and wait for the back-end interface development to switch over to the test.

Install the mock

  npm install mockjs vite-plugin-mock cross-env -D
Copy the code

Modify the package. The json

{"scripts": {// mock the dev command "mock": "cross-env NODE_ENV=development vite"... }}Copy the code

Modify the vite. Config. Js

import { viteMockServe } from "vite-plugin-mock" plugins: [ vue(), viteMockServe({ supportTs: false, mockPath: 'SRC /mock' // mock default root, if placed in another directory, specify path})]Copy the code

Creating mock Data

Js export default [{url: '/ API /login', method: 'post', response: () => {return {code: 200, message: 'success', data: { token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJhdhwIjoxNjI3NTMxNjcwfQ' } } } } ]Copy the code

Call API request

<template>
...
axios.get('/api/login').then(res => {
  console.log(res)
})
...
</template>
Copy the code

Next project

Plan to write about user login and permission management.

Portal to the future

Build Vite2+Vue3 Family barrel from zero (3)

Build Vite2+Vue3 Family barrel from zero (2)

Build Vite2+Vue3 Family barrel from zero (1)

Architecture design based on Vue