Vue项目--mock数据
2023-09-11 14:16:32 时间
1.安装:cnpm install --save mockjs
2.使用步骤:
1)在项目当中src文件夹中创建mock文件夹
2)第二步准备JSON数据(mock文件夹中创建相应的3SON文件)-----格式化一下,别留有空格(跑不起来的)
3)把mock数据需要的图片放置到public文件夹中【public文件夹在打包的时候,会把相应的资源原封不动打包到dist文件夹】
4)创建mockSerer.js通过mockjs插件实现模拟数据:
5)mockServer.js文件在入口文件中引入(至少需要执行一次,才能模拟数据)|
3.获取mock数据
1)配置API接口(将获取三级联动数据的request.js文件复制一份,改成mockAjax.js文件,只需要将里面的baseURL改成'/mock'即可)
2)将新建的这个接口文件汇总到api文件夹中的index.js文件中
import requesterban from "./mockAjax";
export const reqbannerList=()=> requesterban({
url:'/banner',
method:'get'
});
3)在store文件夹中的home文件夹的js文件下,将输入全部读取到state 中,
4) 在home组件尝试读出数据
相关文章
- h5项目(特别是vue)缓存严重的解决方案,配合nginx
- vue重构--H5--canvas实现粒子时钟
- 【记录】vue构建项目npm install错误run `npm audit fix` to fix them, or `npm audit` for details
- vue- element-ui table复选框翻页记忆与清除
- vue-element-admin项目的mock逻辑
- vue-resource插件使用
- vue 单页面应用实战
- vue-element-admin项目的mock逻辑
- CentOS安装nginx,部署vue项目
- GVA gin-vue-admin部署后端注意事项
- nginx配置部署vuejs gva(gin-vue-admin)项目并解决后端api接口请求时报404问题(附nginx.conf)
- vue指令:v-on(@click)绑定点击事件,也就是方法
- vue商城项目开发:axios发送请求及列表数据展示
- vue商城项目开发:底部导航样式、顶部导航矩阵和轮播图
- vue项目怎么进行seo的优化白屏太久怎么处理?
- vue项目中怎样把参数转成formdata传给后端?怎样使用FormData异步提交数据和提交文件?
- vue项目router-link怎样获取动态路由怎样传参?怎样获取/:id的值?
- vue-cli创建的项目的目录结构及说明
- Vue.js:Vue-Router动态路由从服务器接口获取路由数据
- Vue项目通过scrollIntoView实现锚点点击页面平滑滚动
- 105:vue+openlayers 引用组件来添加marker (示例代码)
- ECharts用法及常用配置项详解(Vue环境)
- 五分钟学会用 Vue 脚手架搭建一个完整项目
- vue项目实现监听移动端的物理返回键效果demo(整理)
- vue项目实现轮询定时器-关闭定时器(整理)
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- vue项目中使用CDN引入
- 【三十天精通Vue 3】第十六天 Vue 3 的虚拟 DOM 原理详解
- Vue 组件的定义、组件的使用、什么是路由、路由的定义和使用、nrm的安装使用