electron+vue3全家桶+vite项目搭建【八】集成mockjs模拟数据

引入

造数据是很麻烦的事情，我们可以把造数据的流程交给mockjs去做
视频讲解

mock.js官网

demo项目地址

1.引入依赖

# 安装mockjs的依赖
npm install mockjs
# 安装声明文件
npm i --save-dev @types/mockjs

2.提取一个返回组件

我们写demo时有多个地方需要返回上一页，所以干脆咱们直接写一个goback组件：

src\components\demo\GoBack.vue

<!-- 封装按钮，点击返回上一级页面 -->
<template><el-button @click="goBack" type="success"><slot>返回</slot></el-button>
</template><script lang="ts" setup>
import { useRouter } from 'vue-router';
let router = useRouter();
/// 返回上一页
const goBack = () => {router.back();
};
</script><style scoped></style>

3.使用mockjs制造数

1.首先我们补充一个demo页，专门用来练习mockjs

src\components\demo\MockDemo.vue

<template><div class="mockDemo"><GoBack></GoBack><h1>数据模拟demo页</h1><el-button @click="refreshPage">刷新数据</el-button><ul><li><span class="title">模拟1-10颗星星:</span><span style="color: pink"> {{ starts }}</span></li><li><span class="title">模拟3个用户:</span><ul v-for="item in persons" :key="item.id" class="persion"><li>ID：{{ item.id }}</li><li>NAME：{{ item.name }}</li><li>AGE：{{ item.age }}</li><li>EMAIL：{{ item.email }}</li></ul></li><li></li></ul></div>
</template><script setup lang="ts">
import { ElButton } from 'element-plus';
import Mock from 'mockjs';// 刷新页面
function refreshPage() {location.reload()
}
// 随机1-10颗星星
const starts: string = Mock.mock({'starts|1-10': '★'
}).starts;
// 随机3个用户
const persons: [any] = Mock.mock({'array|3': [{id: '@id', // 随机idname: '@cname', // 随机中文名称'age|18-35': 18, // 随机年龄 18-35email: '@email' // 随机邮箱}]
}).array;</script><style scoped>
ul {list-style: none;
}.mockDemo .title {font-weight: bold;
}.mockDemo .persion {border-bottom: 1px solid #ccc;
}
</style>

2.我们在router中补充路由，demo页补充一个路由跳转

4.演示效果

可以看到我们随机模拟了 1-10个星星，3个用户：

electron+vue3全家桶+vite项目搭建【八】集成mockjs模拟数据相关推荐

electron+vue3全家桶+vite项目搭建【九】集成vite-plugin-mock-server 模拟后端请求
文章目录引入 1.引入依赖 2.集成插件 3.测试接口请求引入后端接口出的太慢?问题不大,咱们可以借助vite-plugin-mock-server插件自己写接口,返回商量好的格式,后续联调直接 ...
electron+vue3全家桶+vite项目搭建【一】使用开源项目快速搭建基础工程
文章目录指引 1.创建工程 2.安装依赖 3.运行工程 4.打包工程指引项目地址视频讲解 1.创建工程直接用开源的electron构建脚手架:https://github.com/elect ...
在vue-cli项目下简单使用mockjs模拟数据
为什么要用mockjs 实际开发中,前后端分离,前端需要后端的接口去完成页面的渲染,但是并不能等到后端成员写完接口再开始进行测试.大部分情况下,前后端需要同时进行开发.因此便需要mockjs制造随机数 ...
Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践
尤大的 Vue3.0 已经发布有一阵子了,已经很成熟了. 而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了. 主要是要熟练一下 Vue3,好准备用 Vue3 ...
推荐一个 Vue3 全家桶 + TS+ Vite2 + element-plus 的网站实战项目
五一期间,花了 3 天时间,边学 Vue3 和 Vite2,边重构自己的项目,终于都用 Vue3 + TypeScript + Vite2 + Vuex4 + Vue-Router4 + elemen ...
猿创征文 | 开箱即用 yyg-cli：快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
助你上手Vue3全家桶之Vue3教程
目录前言 1,setup 1.1,返回值 1.2,注意点 1.3,语法 1.4,setup的参数 2,ref 创建响应式数据 3,reactive 创建响应式数据 4,computed 计算属性 5 ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
前言以下操作,是续接之前第四步 --即:vite+vue3+ts+pinia+element-plus项目已完成搭建好,可以直接业务开发了主应用技术栈:vue2+webpack+js 集成qia ...

electron+vue3全家桶+vite项目搭建【八】集成mockjs模拟数据

引入

1.引入依赖

2.提取一个返回组件

3.使用mockjs制造数

4.演示效果

electron+vue3全家桶+vite项目搭建【八】集成mockjs模拟数据相关推荐

最新文章

热门文章