vue2/nuxt用mock模拟数据从踩坑到最后成功

最新推荐文章于 2024-03-27 08:43:51 发布
最新推荐文章于 2024-03-27 08:43:51 发布
阅读量435 收藏
点赞数
文章标签： 前端 vue.js anti-design-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62933218/article/details/127679674
版权

1.在plugins文件夹下创建mock文件夹，用来放mock数据和发送mock请求（我这里的mock数据直接设置的json格式）

2.创建api文件夹统一管理接口，在mockAjax文件对axios做了一个二次封装，这里踩坑困扰我好久，用create方法创建axios实例时组件自动给我import axios from '@nuxtjs/axios',控制台一直报错说不识别create方法，一开始一直以为是axios版本不匹配，试着降版本最后还想试着降低node版本，然后查了好多csdn,import了一些依赖搞的整个.nuxt文件乱七八糟，无论怎么改控制台都报这个错

最后是删了.nuxt再重新import，反复检查axios文件，发现import axios有问题，应该import axios from 'axios' 而不是import axios from '@nuxtjs/axios'

最后在mounted里直行接口函数，数据成功渲染到页面上。

红红火火恍恍惚惚1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
nuxt从服务端请求数据demo
淡淡的忧伤的博客
04-27 1万+
博主经过一夜的奋斗终于解决了很多nuxt的问题，参数的传递，刷新页面重新渲染，数据请求等不多说直接上代码在pages添加 index.vue<template> <section class="container"> <div> <app-logo/> <div class="links">
基于Nuxt3的API接口服务网站
kuizuo12的博客
07-20 3731
体验了一周的Nuxt3，整个的开发过程不敢说特别顺利，因为存在一定的兼容和Bug。目前Nuxt3的目前还处于rc版，实际项目还得考虑上线。不过个人还是非常推荐Nuxt这个框架，在代码编写与开发体验上实在是太香了，不出意外后续的web项目都会采用Nuxt3来构建，期待正式版的发布。......
nuxt.js 在开发环境使用 mock
HeMister的博客
08-07 1171
安装 npm install mockjs -D 新建mock文件夹目录结构如下 plugins/mock/index.js import management from './constant/app' console.log(process.env.NODE_ENV,'process.env.NODE_ENV'); // development if(process.env.NODE_ENV === 'development'){ const Mock = require('mockjs')
Vue2 使用mockjs
最新发布
qq_43249953的博客
03-27 223
vue2使用mockjs
Nuxtjs 2 - axios & mockjs
O_o
03-08 1906
Nuxtjs 整合 axios 和 mockjs.
nuxt.js使用swiper
热门推荐
骑着代码去流浪
10-05 1万+
1.安装swiper npm install vue-awesome-swiper --save 2.在plugins下新建vue-swiper.js文件 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr' Vue.use(VueAwesomeSwiper) 3.在nuxt....
在Nuxt(vue)渲染模板中使用mock.js随机生成数据
普歌-高禄
08-11 1112
:nuxt中使用mock随机生成多条不同数据一、nuxt中使用mock二、使用mock随机生成数据并获取 一、nuxt中使用mock 第一步，下载两个模块 安装mock,使用mokcjs产生随机数据 npm install mockjs --save-dev或者cnpm install mockjs --save-dev 安装axios，用来发送ajax请求 npm install axios --save或者cnpm install axios --save
easy mock本地部署和nuxt项目初始化
QQwli的博客
04-08 3826
easy mock本地部署和nuxt项目初始化 一、说明： easy-mock和nuxt项目创建初始化用到的nodejs版本有差异，前者需要低版本，后者初始化需要高版本；所以需要nvm管理nodejs版本 安装nvm，下载地址https://github.com/coreybutler/nvm-windows/releases下载nvm-setup.zip解压后直接安装 二、安装nodejs 通过 nvm install (版本号) 例如：nvm install v16.14.2，下图为我下载的两个版本
nuxt.js开发环境使用mockjs模拟数据
幻日のヨハネ
08-27 3222
安装 mockjs 先安装依赖： yarn add mockjs -D 配置插件 在 plugins/mock.js 建立一个 mock 的插件，我们就在这里模拟数据： const Mock = require('mockjs') Mock.mock(/\/user/, 'get', () => { return { 'list|1-10': [{ 'id|+1': 1 }] } } ) Mock.mock(/\/info/, 'post', data =&
Vue2 + mockjs
m0_60838883的博客
02-03 2947
​ 在做开发时，当后端的接口还未完成，前端为了不影响工作效率，手动模拟后端接口。
如何在vue中使用mockjs模拟接口的各种数据
刘欢的博客
05-21 1万+
mockjs的作用 生成模拟数据 模拟 Ajax 请求，返回模拟数据 基于 HTML 模板生成模拟数据（后续更新） 帮助编写单元测试（后续更新） Vue 中使用 mock 有两种使用方式，一种是仅编写数据来调用，第二种是编写 服务+数据模拟真实接口（可在network查看） 第一种方式 使用mock的方式模拟数据接口 可以写完整action url：http://localhost/logi...
vue+koa2搭建mock数据环境的详细教程
11-20
前段时间写了一篇前端vue项目实现mock数据方式的文章，主要是在vue项目里使用mock数据，数据和项目耦合在一起，不太优雅，作为一个有追求的前端，怎么能容忍这种方法呢？特以此篇，记录利用koa2搭建服务端，提供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 + koa2 + mockjs模拟数据的方法教程
01-21
前言 首先说一下这是本人第一次分享东西第一次写，写的不好或者有错误的请大家多包涵支出错误共同进步，好了，话不多说了，来一起看看详细的介绍吧。...第二步 因为本地的vue访问本地的mock 1、配置vue
《vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能》mock文件
06-02
对应《vue项目使用mock模拟数据并实现列表的增、删、分页、批量操作功能》博客
nuxt中使用axios/@nuxtjs/axios 以及使用mock
斗师——Ace
06-19 3672
1. 搭建nuxt项目：参考https://blog.csdn.net/qq_42231156/article/details/90174203。 2. nuxt中使用全局axios：参考：https://blog.csdn.net/weixin_30794491/article/details/99910973。 2.1 如果pageage.json中的dependencies没有"@nuxtjs/axios"就下载安装：npm install --save @nuxtjs/axios ...
从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API
weixin_30945039的博客
01-14 526
前言 哈喽大家周一好，今天的内容比较多，主要就是包括：把前端页面的展示页给搭出来，然后调通接口API，可以添加数据，这两天我也一直在开发，本来想一篇一篇的写，发现可能会比较简单，就索性把项目搭建的过程简化，一次写好了，在开发 Nuxt.js 框架的过程中，我发现相比之前还是有些变化的，如果你是读过我第一个前后端分离系列的小伙伴，可能看过我简单说过Nuxt框架的一些知识《Nuxt.js 是什么？》...
将nuxt.js项目部署到域名二级目录下
weixin_55510188的博客
09-25 2610
6.2、打包后正常是将如下四个文件/夹复制到服务器对应目录下，如果有自定义的中间件服务，也要一起复制过去。引入了外部(static目录下)的css、js，或者是使用了axios，需要同步修改相对应的配置。6.3、在服务器对应目录下，运行npm install 安装依赖，npm start 启动项目。2、先配置用于区分开发环境(dev)和生产环境(prod)的env变量，参考我的文章。说明一下：配置router即可实现变更应用的根URL，例如像下面的配置，项目将运行在。6、部署到域名下的二级目录。
Nuxt3第四篇【数据获取与状态共享】
没有途径，只有努力
11-18 2338
Nuxt3数据获取与状态共享 首先写一个假数据api根目录下创建server文件夹—>再在它下面创建api文件夹—>创建test.ts文件 useAsyncData 这样就拿到了返回过来的数据… 如果返回值不是对象结构,可以使用进行过滤 这里主要使用以上两个，剩下的两个加了个Lazy关键字懂得都懂…创建一个共享文件在根目录创建文件夹—》在它下边创建文件夹名字是固定的，这样nuxt才能识别进行自动引入 导出了count这个变量共享使用: 这样就能实现共享使用了。。。 基本完结~（用于拓展）
Error: Cannot find module 'vue-scrollto/nuxt'
04-05
Solution: 1. Make sure that you have installed the vue-scrollto package in your project. You can do this by running the following command in your terminal: ``` npm install vue-scrollto --save ``` 2. If you are using Nuxt.js, you need to install the vue-scrollto/nuxt package instead. You can do this by running the following command in your terminal: ``` npm install vue-scrollto@nuxt --save ``` 3. If you have installed the package but are still getting the error, try deleting the node_modules folder and reinstalling all dependencies by running the following commands in your terminal: ``` rm -rf node_modules npm install ``` 4. Make sure that you have imported the vue-scrollto module in your component or page. You can do this by adding the following code to your script section: ``` import VueScrollTo from 'vue-scrollto' export default { ... methods: { scrollToTop() { VueScrollTo.scrollTo('#top') } } } ``` 5. If you are still having issues, try updating your dependencies to the latest versions by running the following command in your terminal: ``` npm update ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值