Vue3+Vite项目使用mockjs模拟数据

一、安装mockjs

yarn add mockjs -S 或 npm i mockjs -D

二、安装vite-plugin-mock

npm i vite-plugin-mock -D

三、在src/mock文件夹下创建index.js 文件

1. 在index.js 写你想要的数据

注意：如果里面有图片要放到public/imgs文件夹里面，要不然图片渲染不到页面上，

export default [{url: "/api/getUsers", //这里只能是string格式method: "get",response: () => {return {code: 0,message: "ok",data: {'rows|10': [{id: '@guid',name: '@cname','age|20-30': 23,'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']}]},}}},{url:'/api/bannerlist',method:'get',response:()=>{return {code: 200,message: "ok",list:[{"id":"1","img": "../../public/imgs/17.jpg" // 注意如果里面有图片要放到public/imgs文件夹里面，要不然图片渲染不到页面上，},{"id":"1","img": "../../public/imgs/18.jpg"},]}}},{url: '/api/getUserInfo', // 注意，这里只能是string格式method: 'get',response: () => {return {menusList: [{id: '1',title: '南辰',subMenuList: [{id: '11',title: '南',path: '/user/nan'},}]}]

四、安装 axios

npm install axios

1.在 axios 文件夹下面得index.js 引入

import axios from "axios";
// 假数据
const instance = axios.create({baseURL: '',timeout: 5000,headers: {'X-Custom-Header': 'foobar'}});// 添加请求拦截器instance.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});export default instance

五、封装 axios 统一管理 api

import http from '../utils/index'// 假数据
export const list = () => {return http({method: 'get',url: 'api/getUsers' // 必须和 mock 里面的url 操持一致})
}export const person=()=>{return http ({method:'get',url:'/api/getUserInfo'})
}

六、在vite.config.s进行个人配置

import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),// mock 假数据viteMockServe({mockPath: "./src/mock/", // 解析，路径可根据实际变动localEnabled: true, // 此处可以手动设置为true，也可以根据官方文档格式supportTs: false,logger: true})],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

七、组件引入使用

<template><div class="about"><h1>This is an about page</h1></div>
</template>
<script setup>
import {list ,person} from '../api/index'
import { onMounted } from 'vue';
onMounted(async()=>{let res=await list()console.log(res);let data= await person()console.log(data);
})</script>
<style></style>

八、打印结果

Vue3+Vite项目使用mockjs模拟数据相关推荐

在vue-cli项目下简单使用mockjs模拟数据
为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数 ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
mock模拟的数据能增删改查吗_如何在Vue中使用Mockjs模拟数据的增删查改
之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...
react使用mockjs模拟数据
react使用mockjs模拟数据废话少说,直接开始: mockjs简介生成随机数据,拦截 Ajax 请求注意:只能使用axios,fetch请求无法拦截官网:http://mockjs.co ...
vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能
文章目录什么是mock vue项目引入mock mock模拟数据生成列表并模拟实现已发起表单页面表格分页功能 mock实现数据的新增 mock实现数据列表的删除列表数据批量处理(如审核通过) 总结 ...
【MockJS】使用MockJS模拟数据（超级详细）
[MockJS]使用MockJS模拟数据 (超级详细) 文章目录 [MockJS]使用MockJS模拟数据 (超级详细) 2. MockJS 2.1 准备工作 2.2 语法规范数据模板定义规范 DT ...
【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量
vue3+vite项目引入SCSS及使用SCSS全局变量
【Vue】032-尚硅谷-尚品汇-mockjs模拟数据---20230111
032-尚硅谷-尚品汇-mockjs模拟数据官网链接第一步:安装依赖包mockjs 安装mockjs `npm install --save mockjs` 第二步:在src文件夹下创建一个文件夹 ...
vue实战-mockjs模拟数据
vue实战-mockjs模拟数据 1.在src目录下创建文件夹mock 2.将模拟的json格式的数据写入到文件夹中 banner.json [{"id": "1&quo ...

Vue3+Vite项目使用mockjs模拟数据

一、安装mockjs

三、在src/mock文件夹下创建index.js 文件

Vue3+Vite项目使用mockjs模拟数据相关推荐

最新文章

热门文章