Vue3+TypeScript+Vite项目集成Mock

Vue3+TypeScript+Vite项目集成Mock

1、快速创建vue3+TypeScript+vite项目

 npm create vite@latest example-vite-plugin-mock --template vue
 cd example-vite-plugin-mock
 npm install

2、安装vite-plugin-mock&mockjs依赖

npm install vite-plugin-mock mockjs @types/mockjs -D
npm install axios

3、创建模块化文件

项目结构

+---mock
|   +---modules
|   |   \---user
|   |           index.ts
|   |
|   \---types
|           index.ts
|
+---public
|       vite.svg
|
\---src
    |   App.vue
    |   main.ts
    |   mockProdServer.ts
    |   style.css
    |   vite-env.d.ts
    |
    +---assets
    |       vue.svg
    |
    +---components
    |       HelloWorld.vue
    |
    \---utils
            axiosConfig.ts

3.1、创建类型定义文件 mock/types/index.ts

export interface ResponseData<T = any>{
   
 code: number,
 data: T,
 message: string
}

export interface MockRequestParams