Vue-cli@4.x mock数据

最新推荐文章于 2021-11-02 15:39:50 发布
最新推荐文章于 2021-11-02 15:39:50 发布
阅读量1.2k 收藏
点赞数
分类专栏： vue迁移
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013985712/article/details/106634728
版权
在Vue-cli 4.x项目中，将data.json模拟数据置于根目录，通过配置vue.config.js实现数据拦截。浏览器访问http://localhost:8080/api/data1可查看mock数据。
摘要由CSDN通过智能技术生成

Vue_cli@4.x mock数据

  1. 将模拟数据data.json放在项目根目录下;
  2. 配置vue.config.js:
const appData = require('./data.json')
const data1 = appData.data1;
const data2 = appData.data2;
const data3 = appData.data3;

module
最低0.47元/天 解锁文章
solo游游
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解vue-cli项目中怎么使用mock数据
08-27
主要介绍了vue-cli项目中怎么使用mock数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue cli4 中mockjs在dev环境和build环境的配置
weixin_42865522的博客
06-20 2909
vue cli4 中mockjs在dev环境和build环境的配置cli4中环境配置自定义配置环境mockjs在vue cli4开发环境中的配置及使用 如有错误请告知！！！ cli4中环境配置 这里参考了这位的文章: vue-cli4.0多环境配置，变量与模式.写的很详细，大家可以移步去康康~~~ 默认情况下，Vue cli有三种开发模式:development,production,test. 自定义配置环境 cli4在自定义配置环境时，需要自己添加文件，像????????????这样： 这两个文件是
vue-cli4+mockjs的使用
qq_36818931的博客
10-09 2091
文章目录前言一、mockjs是什么？二、使用步骤1.npm安装mockjs2.创建utils文件夹统一存放api3.将api.js挂载到vue原型上4.创建mock文件夹5.在开发环境下添加mockjs的依赖6.在vue文件中使用mockjs总结 前言 如今web开发大部分都采用前后端分离开发模式，那么我们可以使用mockjs来模拟后端数据，独立于后端开发，从而提高开发效率 本demo使用的为vue-cli 4.2.2版本 提示：以下是本篇文章正文内容，下面案例可供参考 一、mockjs是什么？ moc
vueCLI4之Mock
【红豆】玲珑骰子安红豆，入骨相思知不知
06-11 357
目录MockMock安装Mock使用 Mock 根据笔者自己的理解 Mock是在完全前后的分离的项目中。后台接口没有出来或者没有数据的情况下，可以使用接口API和返回的数据格式创造需要的数据，使页面的完整展示并基本跑通逻辑，等后台有数据之后，只需要添加前缀接口域名就可以，方便快捷。 Mock安装 npm install mockjs --save cnpm install mockjs --save Mock使用 在vueCLI4的src目录下面创建 mock 目录 card.js import M
vue-cli-plugin-mock:vue-cli3插件模拟
05-26
vue-cli-plugin-mock 用于本地模拟数据功能的软件包 简单的写作（Express.js风格） 观看文件更改 自动重装模拟服务器 支持esm / cjs样式模块 安装 yarn add vue-cli-plugin-mock 用vue-cli3安装 vue add vue-cli-...
浅谈vue-cli 3.0.x 初体验
11-27
Vue CLI 3.0.x 是一个重要的升级，它带来了许多改进和优化，使得Vue.js项目的构建过程更加便捷和高效。本文将围绕Vue CLI 3.0.x 的特点、安装、多环境配置等方面展开讨论。 首先，Vue CLI 3.0.x 对比之前的2.0版本...
vue-cli项目中怎么使用mock数据
08-29
使用mock数据在Vue-cli项目中的应用 在现代Web开发中，Mock数据是一个非常重要的概念，它可以帮助开发者模拟真实的数据，以便更好地测试和开发应用程序。在Vue-cli项目中使用Mock数据可以提高开发效率和测试效率，...
基于@Vue/cli 4.3 及 Mock.js 生成随机数据用于Ajax请求 —— 模拟美团官网
01-08
基于@Vue/cli 4.3 及 Mock.js 生成随机数据用于Ajax请求 —— 模拟美团官网美团网——web端搭建环境项目创建及目录结构模块开发部分代码介绍说明Vuex 状态管理总结 美团网——web端 搭建环境 @Vue/cli 4.3.1 ，包含 vue-router / vuex等的使用 —— 主体环境 (@vue/cli本就基于 webpack处理代码打包) @vue/cli-service-global 用于快速原型开发 babel 转换代码 axios 请求数据 / Mock.js 模拟数据 element-ui 引用部分组件 less 编写 css 样式 整体环境大致如上
vue-cli项目中使用mockjs模拟数据-配置和使用（超详细！）
weixin_40141473的博客
03-25 3433
在前端的开发中，很多时候都需要用到接口，但是后端的接口往往要比较晚才出来，那么前端有没有办法通过制造假数据来模拟后端端口，加快开发速度呢？答案是肯定的，这里有两种方法介绍下。 1. 使用网上一些提供数据的网站，如聚合数据、极速数据等，但是需要注册，大部分API需要钱????，且不如自己配置的方便； 2. 利用mockjs模拟数据。 下面就介绍在vue-cli项目中使用mockjs来模拟数据的步骤。...
vue-cli4 + Mockjs如何拦截带参数的请求
qq_36818931的博客
10-13 1266
文章目录前言一、发现问题？二、分析原因三、解决办法总结 前言 上一篇vue-cli4+mockjs的使用讲到使用mockjs模拟数据，那么请求带参数的话会发生什么呢？ 提示：以下是本篇文章正文内容，下面案例可供参考 一、发现问题？ 将vue-cli4+mockjs的使用的例子拿过来改一下： _this.http.get(_this.api.LIST,{id : 0}).then( res => { if(res.status === 200){ cons
vue-cli3 ：mock模拟数据，用axios请求数据过程遇到的问题
weixin_30642869的博客
06-14 791
mock是用来模拟数据，对于前端开发而言这是真正的独立开发，之前都是自己手动模拟数据，页面多了就感觉很混乱而且效率不高，还不能真正去模拟请求后台数据。 之前请求后台是用ajax，最近学vue框架，所以采用axios.(希望一切友好....) 首先在项目里先安装mock，以及axios 安装好之后，接下来开始配置： 1.先看一眼我的目录，没有箭头的可以忽略 2.修改内容 2.1配置...
前后端分离实践（四）—— 使用vue-cli搭建前端展示层并用mock模拟测试数据
云卷云舒的架构师之路
05-15 1399
前后端分离实践系列文章总目录 目录 一、搭建一个Vue-cli脚手架应用 1、全局安装vue-cli 2、使用webpack初始化一个vue应用 3、进入fbsep-vue应用目录启动应用 4、浏览器访问fbsep-vue应用 二、使用mock进行接口数据模拟 1、安装mockjs 2、安装Axios 3、添加mock测试数据文件 4、引用mock测试数据文件 5、在ind...
vue 中引入js文件json数据 在组件中使用 避免打包 详细教程
爱睡的虫虫
07-28 2192
vue中如果需要引入外部js文件，避免被打包我们可以放到public文件下： 在 public 下新建文件夹 json 中有 xmlList.js 文件 此时xmlList就不会被打包编译。 在组件中使用数据 在html文件中引入 <script src="json/xmlList.js"></script> xmlList.js let xmlList = [ {"name":"姓名一","url":"www.abc.com"}, {"name":"姓名二","url":
mock 前后端联调数据，提升开发效率~
qq_36801609的博客
11-02 311
以vue + koa2 为例： 创建vue项目 首选创建vue项目，我们选择vue-cli脚手架创建vue项目： 安装vue-cli cnpm install @vue/cli -g 查看当前vue-cli版本 vue --version 初始化项目 vue init webpack 项目名称 4.安装依赖启动项目 cd 项目名称 cnpm install npm run dev 构建koa2 服务 之后在项目文件夹内部创建koa2服务： 安装 koa2项目构建插件 cnpm install koa2
【最简单版】vue-cli项目中怎么mock数据
疯狂的芒果
10-04 2899
在vue项目中, mock数据可以使用 node 的 express模块搭建服务 1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下更改： var appData = require('../test/data.json')
使用vue-cli3时怎么使用mock数据
Raaabbt GO!!
08-20 9397
使用vue-cli3时怎么使用mock数据 在前后端分离的开发模式中，后端给前端提供一个接口，由前端向后端发请求，得到数据后前端进行渲染。由于前后端开发进度的不统一，前端往往使用本地的测试数据进行数据渲染的测试。 正文开始 在vue-cli构建的项目，我们可以借助devServer开启一个服务，然后我们可以通过路由模拟一个接口来进行测试。 在vue-cli2和vue-cli3中的配置方...
vue-cli搭配mockjs模拟可抓到的请求
weixin_41643133的博客
11-06 723
vue-cli搭配mockjs模拟可抓到的请求 书写node服务，并返回mock的数据 正确配置vue-cli的proxy 正确配置命令行先启动步骤1的服务，再启动vue-cli 步骤说明 1. 在项目的任意路径创建mockServer.js（名称自定义）文件，书写node服务，并返回mock的数据，该文件的代码如下 /** * 请用yarn或npm自行下载安装包 * 安装包包括 yarn a...
> vue-element-admin@4.4.0 dev > vue-cli-service serve --mode development ERROR Error loading F:\工作\his-erp-front\vue.config.js: ERROR Error: Cannot find module 'body-parser' Require stack: - F:\工作\his-erp-front\mock\mock-server.js - F:\工作\his-erp-front\vue.config.js - F:\工作\his-erp-front\node_modules\.store\@vue+cli-shared-utils@4.5.19\node_modules\@vue\cli-shared-utils\lib\module.js - F:\工作\his-erp-front\node_modules\.store\@vue+cli-shared-utils@4.5.19\node_modules\@vue\cli-shared-utils\index.js - F:\工作\his-erp-front\node_modules\.store\@vue+cli-service@4.4.4\node_modules\@vue\cli-service\bin\vue-cli-service.js Error: Cannot find module 'body-parser' Require stack: - F:\工作\his-erp-front\mock\mock-server.js - F:\工作\his-erp-front\vue.config.js - F:\工作\his-erp-front\node_modules\.store\@vue+cli-shared-utils@4.5.19\node_modules\@vue\cli-shared-utils\lib\module.js - F:\工作\his-erp-front\node_modules\.store\@vue+cli-shared-utils@4.5.19\node_modules\@vue\cli-shared-utils\index.js - F:\工作\his-erp-front\node_modules\.store\@vue+cli-service@4.4.4\node_modules\@vue\cli-service\bin\vue-cli-service.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) at Function.Module._load (internal/modules/cjs/loader.js:746:27) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:93:18) at Object.<anonymous> (F:\工作\his-erp-front\mock\mock-server.js:2:20) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:12) at Module.require (internal/modules/cjs/loader.js:974:19)报错如何解决
最新发布
07-21
3. 检查代码中是否正确引入了 `body-parser` 模块：在 `mock-server.js` 文件中检查是否正确引入了 `body-parser` 模块，并且是否在其他地方使用了该模块。 4. 检查 `vue.config.js` 文件中是否存在错误：检查 `vue...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值