首页 > 其他分享 >Vue3——集成mock 模拟数据生成器

Vue3——集成mock 模拟数据生成器

时间:2024-03-12 20:12:43浏览次数:26  
标签:vue plugin 生成器 mock Vue3 import vite

  • 安装依赖
npm install -D mockjs [email protected]

在 vite.config.js 文件中引入并配置 vite-plugin-mock 插件

import { UserConfigExport, ConfigEnv } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command })=> {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: "mock", // 指定mock文件的路径
        localEnabled: command === "serve", // 根据命令行参数决定是否开启本地存储
      }),
    ],
  }
}

在根目录创建 mock 文件夹:去创建我们需要 mock 数据与接口!!!

在 mock 文件夹内部创建一个 user.ts 文件

import { mock } from "mockjs";

// 定义一个mock接口,返回用户列表
export default [
  {
    url: "/dev-api/user/list",
    method: "get",
    response: () => {
      return {
        code: 0,
        data: mock({
          "list|10": [
            {
              id: "@id",
              name: "@name",
              age: "@integer(18, 60)",
              email: "@email",
              avatar: "@image",
            },
          ],
        }),
      };
    },
  },
];

标签:vue,plugin,生成器,mock,Vue3,import,vite
From: https://www.cnblogs.com/flyLoong/p/18047381

相关文章

  • 创建Vue3项目,更多参考vue官网
     一、环境:1、Node版本(node-v命令查询,参考则是需要18.0及以上)C:\Users\86176>node-vv16.14.0后续又重新下载nvm进行新的版本安装,这里后面安装的19.0的也有错误,安装18.19.12、vue-cil版本(vue-V命令可查询电脑版本,参需3.0以上)C:\Users\86176>vue-V@vue/cli5.0.83、其他......
  • vue3+elementplus(ElementUI)入门案例
    1、配置脚手架,已配置则无需再配npminstall-gvue-cli2、创建空文件夹,用vscode打开,并在vscode终端执行如下命令vuecreateXXXcdXXX3、安装elementplus插件,注意:vue3需要搭配elementplus使用,elementplus是elementui的升级版,需搭配vue3使用(初学者建议直接学vue3+elemen......
  • 基于Vue(提供Vue2/Vue3版本)和.Net Core前后端分离、跨平台的快速开发框架
    前言今天大姚给大家推荐一款基于Vue(提供Vue2/Vue3版本)和.NetCore前后端分离、开源免费(MITLicense)、强大、跨平台的快速开发框架,并且框架内置代码生成器(解决重复性工作,提高开发效率),支持移动端(iOS/Android/H5/微信小程序):Vue.NetCore。提高开发生产效率、避免996可以考虑试试这......
  • VUE3将时间戳转换为时间格式
     formatDate(time){constdate=newDate(time*1000);constyear=date.getFullYear();constmonth=String(date.getMonth()+1).padStart(2,'0');//月份从0开始,所以加1,并用0填充constday=String(date.getDate()).padStart(2,&#......
  • Vue3中使用TinyMce编辑器
    在线演示地址:TinyMce编辑器邮件发送一,安装TinyMce富文本npminstall@tinymce/tinymce-vue-Snpminstalltinymce-STinyMce本身是英文编辑器,所以还需要下载中文本地化文件:https://www.tiny.cloud/get-tiny/language-packages/下载完成后放入node_modules下的tinymce文......
  • vue3 keepalive 失效
    好久没更新博客了,重复拧螺丝keepalive之前用过,但是好久了,所以这次遇到问题觉得有点新颖我遇到的问题是在路由里面设置子路由,子路由的router-view设置keepalive不生效的问题 之前用了keep-alive没有用v-slot因为router-view就是一个单独的组件,他的本质并不是使用url对应的组......
  • Vue3自定义指令实现权限控制
    使用Pinia(Vue.js的轻量级状态管理库,是Vuex的替代品)来管理用户权限,并结合自定义指令控制元素的显隐。步骤操作如下:1、安装Pinia:npminstallpinia或yarnaddpinia解释:安装Pinia库,这是一个轻量级的状态管理库,适用于Vue3。2、创建PiniaStore://stores/user.jsimport{......
  • 创建Vue3+Vite+TypeScript项目
    一、安装node环境,安装18.0或更高版本的Node.js  推荐使用nvm管理node版本:一看就会使用nvm实现多个版本的node自由切换-始是逍遥人-博客园(cnblogs.com)二、创建项目  1、选择一个工作路径,如:E:\webproject  2、打开cmd命令窗口进入到当前目录    快捷方式:直接......
  • 代码生成器之如何快速生成后端接口?
    前言在现代软件开发中,重复性的增删改查逻辑代码的编写往往非常耗时且容易出错。为了提高开发效率,减少手动维护的成本,代码生成器就成为了一个非常重要的工具,本文小编就将为大家介绍一下如何利用一个开源项目快速生成数据接口。实现方式环境准备技术栈:Java,Spring-Boot,MyBatisPlu......
  • vue3—尚硅谷禹神笔记转载
    1.Vue3简介2020年9月18日,Vue.js发布版3.0版本,代号:OnePiece(n经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址:Releasev3.0.0OnePiece·vuejs/core截止2023年10月,最新的公开版本为:3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快5......