vite+vue3+mock 简单数据接口

写一些纯前端的项目时，自己造数据有些麻烦，于是我们可以利用mock造一些简单的数据，来满足我们的需求。

1.导入依赖

yarn add mockjs --save-dev

2.配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig({
  plugins: [vue(),
  viteMockServe({
    supportTs: false,
    logger: false,
    mockPath: "./mock/"
  })
  ]
  ,
  server: {
    host: '0.0.0.0'
  }
})

3.创建文件
创建一个mock文件夹，再穿件index.js

import Mock from "mockjs";
const list = Mock.mock({'goodsList|1-30':[{
    "goodsNum|1-10": 10,
    "boolean|1": true,
    "string|1-10": "★"
}]}) 
Mock.mock('/goods/list','get',{code:1,data:list})

4.main.ts 引入mock文件

import './mock/index.js'

5.使用

const listFun = async() =>{
        const {data} = await axios.get('/goods/list')
        console.log(data);
        const goodsList = reactive(data.goodsList)
      }
      listFun()

6.结果