vite+vue3中使用mock模拟数据

1.安装mockjs和vite-plugin-mock

npm i mockjs vite-plugin-mock --save-dev

2.在vite.config.ts文件中配置vite-plugin-mock使用方式

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(),viteMockServe({supportTs:false,logger: false,mockPath: "./mock/"})]
})

vite-plugin-mock 中的配置内容的含义

{

supportTs?: boolean; --是否读取ts文件模块，设置为true时不能读取js文件

logger?:boolean; --是否在控制台显示请求日志
mockPath?: string; --设置模拟数据的存储文件夹，如果不是index.js需要写明完整路径
ignore?: RegExp | ((fileName: string) => boolean);--读取文件时忽略指定格式的文件
watchFiles?: boolean;--是否监视mockPath文件夹内文件的修改
localEnabled?: boolean;--设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能
ignoreFiles?: string[]; --读取文件时忽略的文件
configPath?: string;--设置模拟读取的数据条目。当文件存在并且位于项目根目录中时，将首先读取并使用该文件。配置文件返回一个数组
prodEnabled?: boolean;--设置打包是否启用 mock 功能
injectFile?: string;--如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}。这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.js

injectCode?: string;--injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}

}

3.在根目录下创建mock文件夹

新建文件夹mock/index.js

export default [{type:'get',url:'/user/login',response: () => {return {isAuth:true}}
},{type:'get',url:'/user/menu',response: () => {return {menusList:[{id:'/sysManagent',title:'系统管理',subMenuList:[{id:'/userList',title:'用户管理',path:'/user/manage'},{id:'/roleList',title:'角色管理',path:'/user/role'},{id:'/permissionList',title:'权限管理',path:'/user/permission'}]},{id:'businessManagent',title:'业务管理',subMenuList:[{id:'/businessList',title:'业务逻辑'}]}],statusCode:200}}
}]

4.在文件中调用

<template><div class="aside"><div class="collpase-btn" @click="collpaseMenu"><el-icon><fold /></el-icon></div><el-menuactive-text-color="#ffd04b"background-color="#545c64"class="el-menu-vertical-demo":default-active="router.path"text-color="#fff":collapse="store.state.isCollapse"@open="handleOpen"@close="handleClose":router="true"><el-sub-menu:index="item.id"v-for="item in menus.mensList":key="item.id"><template #title><el-icon><grid /></el-icon><span>{{ item.title }}</span></template><el-menu-item :index="it.id" v-for="it in item.subMenuList">{{ it.title }}</el-menu-item></el-sub-menu></el-menu></div>
</template>
<script lang="ts">
import axios from 'axios'
import { defineComponent, onMounted, reactive } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'export default defineComponent({name: 'Aside',setup() {const store = useStore()const router = useRoute()const mensList: any = []let menus = reactive({ mensList })const handleOpen = (key: string, keyPath: string[]) => {}const handleClose = (key: string, keyPath: string[]) => {}const collpaseMenu = () => {store.dispatch('collpaseChange')}onMounted(() => {axios.get('/user/menu').then((res) => {console.log(res);menus.mensList = res.data.menusList})})return {handleOpen,handleClose,collpaseMenu,store,menus,router}},
})
</script><style lang="scss" scoped>
.el-menu-item.is-active {background-color: var(--el-menu-hover-bg-color);
}
.collpase-btn {text-align: center;width: 100%;padding: 10px 0px;cursor: pointer;.el-icon {color: white;font-size: 24px;}
}
</style>

5.其他

如果mock文件夹建在src文件目录下，需要修改tsconfig.json文件

  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","src/mock/**/*.ts"],

vite+vue3中使用mock模拟数据相关推荐

前端开发中使用mock模拟数据
使用mock进行模拟数据开发第一步:npm i mockjs -D 这里必须加-D,因为我们只是开发环境使用第二步:在 main.js 文件中引入mock:import '@/mock' 第三步: ...
在vue中使用Mock模拟数据
Q:为什么进行模拟数据? A:在做开发时,后端程序没有配齐,前端人员在做vue开发时,需要自己先模拟接口,模拟数据,等到后端数据配齐,提供好接口后,将项目中的接口换一下即可一.本地加载请求静态jso ...
在微信小程序项目中使用mock模拟数据
之前对mockjs做了一个介绍,以及在js.vue中拦截ajax的方法,介绍是必看的,也是一些基础 mockjs介绍总结 mockjs拦截ajax 在vue项目中使用mock拦截axios请求这一篇 ...
d2admin中使用mock模拟数据
第一次在d2admin中使用mock数据,花费了好长时间才知道怎么用,所以想要记录一下,但是其实很简单,只有简单的几步比如要生成一个虚拟的流程列表数据 step1: 在src–>mock–&g ...
vue项目中使用mock模拟数据
一.先在vue项目中安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save ...
vue中使用mock模拟数据
1.安装mock npm install mockjs --save-dev 2.在src下创建mock目录添加mock.js文件 mock.js const Mock = require('mock ...
Vue脚手架中使用Mock模拟数据、aixos实现ecahrts
一 axios二次封装安装axios: npm i axios 在vue脚手架的main.js全局引入(axios不是插件,不能使用Vue.use方法引入) import http from &qu ...
VUE开发环境下mock模拟数据与后端接口对接示例
在以往的前端开发中,前端严重依赖后端,必须等待后端接口开发出来才能继续开发.使用mock,可以使得前后端开发异步进行,互不影响.Mock.js 是一个模拟数据生成器,使用它可以拦截ajax请求,直接模 ...
vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能
文章目录什么是mock vue项目引入mock mock模拟数据生成列表并模拟实现已发起表单页面表格分页功能 mock实现数据的新增 mock实现数据列表的删除列表数据批量处理(如审核通过) 总结 ...

vite+vue3中使用mock模拟数据

1.安装mockjs和vite-plugin-mock

2.在vite.config.ts文件中配置vite-plugin-mock使用方式

3.在根目录下创建mock文件夹

4.在文件中调用

5.其他

vite+vue3中使用mock模拟数据相关推荐

最新文章

热门文章