VUE3.0 + TS 中该如何引进mockjs进行开发

如何在VUE3+TS中引入Mockjs

1.安装Mockjs

yarn add mockjs -S

2.创建mock文件夹，并在文件夹下创建index.ts typing.ts 以及你需要使用到的模块的.ts文件 例如：user.ts

index.ts里
import Mock from 'mockjs';
import user from './user';
import { MockParams } from './typing';
const mocks = [...user];
//设置延时时间
Mock.setup({
    timeout: '300-600',
});

export function mockXHR() {
    let i: MockParams;
    for (i of mocks) {
        Mock.mock(new RegExp(i.url), i.type || 'get', i.response);
    }
}

user.ts里
export default [
    // GetUserInfo
    {
      url: '/upms/user/info',
      type: 'get',
      response: () => {
        return {
          code: 200,
          message: '成功',
          data: {
            name: 'testName',
          },
        };
      },
    },
    // getToken
    {
      url: '/auth/oauth/token',
      type: 'post',
      response: () => {
        return {
          code: 200,
          message: '成功',
          data: {
            name: 'testName',
          },
        };
      },
    },
  ];
  

3.在shims-vue.d.ts中添加声明(目的是使ts能识别出mockjs)

declare module 'mockjs'

4.在main.ts中引进mockjs 一般你可以选择在script里再新增一种运行方式，如"serve:mock": “vue-cli-service serve --mode mock”,并且在文件夹根目录下创建对应的.env.mock文件，在.env.mock文件中你需要将NODE_ENV变为mock

import { mockXHR } from '@/mock/index';

if (process.env.NODE_ENV === 'mock') {
  // 判断是否为mock模式
  mockXHR();
}

5.在终端执行yarn run serve:mock,你就会发现进入到mock模式啦

yarn run serve:mock