vue-cli3使用mock数据的方法分析

2024-08-16 03:01:01

本文实例讲述了vue-cli3使用mock数据的方法。分享给大家供大家参考，具体如下：

在前后端分离的开发模式中，后端给前端提供一个接口，由前端向后端发请求，得到数据后前端进行渲染。由于前后端开发进度的不统一，前端往往使用本地的测试数据进行数据渲染的测试。

正文开始

在vue-cli构建的项目，我们可以借助devServer开启一个服务，然后我们可以通过路由模拟一个接口来进行测试。

在vue-cli2和vue-cli3中的配置方式是不同的。下面分别展示

##　vue-cli2

先放一张vue-cli2生成项目图片

mock文件夹是一个我自己创建的用来存放模拟数据的文件夹，其中有一个json文件，下面我们要对build目录下webpack.dev.conf.js进行配置

// 引入文件
const goodsList = require('../mock/goods.json');
// ……
// 配置devServer
devServer: {
  clientLogLevel: 'warning',
  historyApiFallback: {
   rewrites: [
    { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
   ],
  },
  hot: true,
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  host: HOST || config.dev.host,
  port: PORT || config.dev.port,
  open: config.dev.autoOpenBrowser,
  overlay: config.dev.errorOverlay
   ? { warnings: false, errors: true }
   : false,
  publicPath: config.dev.assetsPublicPath,
  proxy: config.dev.proxyTable,
  quiet: true, // necessary for FriendlyErrorsPlugin
  watchOptions: {
   poll: config.dev.poll,
  },
  before(app){
   app.get('/goods/list',(req,res,next)=>{
    res.json(goodsList);
   })
  }

后面的before(app)部分就定义了可以通过向/goods/list发送get请求来得到我们要的json文件。

同事我们在vue文件中只要

// 利用了axios
axios.get("/goods/list").then(res => {
    this.goodsList = res.data.result;
   }).catch(error=>{
    console.log(error);
   });

就可以请求到数据

vue-cli3

vue-cli3主打自动化，0配置。但是我们往往需要进行一些配置，这时我们就要创建一个配置文件。目录结构如下

vue.config.js就是我们手动创建的配置文件，完整的配置项可以在官网看到，在这里我们着重于devServer

const mockdata = require('./mock/test.json');

module.exports={
 devServer: {
  port:4000,
  before(app){
   app.get('/goods/list',(req,res,next)=>{
    res.json(mockdata);
   })
  }
 }
}

这样就达到了相同的效果

希望本文所述对大家vue.js程序设计有所帮助。

vue-cli3.0使用及部分配置详解

好长一段时间没有关注vue脚手架了,昨天因为需要个后台模板,用脚手架搞了一下,竟然发现指令不能用了,看官方文档已经升级3.0,也是试的玩了一下, 大致写写怎么玩的! 1.先全局安装vue-cli3.0 检测安装: vue -V 2.创建项目(这个就跟react创建脚手架项目比较像了) 这里如果你是第一次用3.0版本的话,是没有前两个的,而只有最后两个,这里是让你选的,第一个是默认配置,一般选第二个,自己配置,这里选择最后一个在选择功能后,会询问更细节的配置, TypeScript: 是否使
vue-cli3全面配置详解

本文介绍了vue-cli3全面配置详解,分享给大家,具体如下: vue-cli3-config 创建项目配置环境变量通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境在项目根目录中新建.env, .env.production, .env.analyz等文件只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中,代码中可以通过process.env.VUE_APP_BASE_API访问 NO
vue-cli3搭建项目的详细步骤

中文文档 https://github.com/vuejs/vue-docs-zh-cn 在安装之前请装好nodeJs 安装vue cli3 1. 检测vue 的版本 vue -V (V大写) or vue --version 2. 安装@vue/cli npm install -g @vue/cli (ps: vue cli2的安装方法 npm install -g vue-cli ) 安装全局桥插件,能兼容使用vue cli2 npm install -g @vue/cli-init cmd
Vue-cli3项目配置Vue.config.js实战记录

Vue-cli3 搭建的项目界面想对之前较为简洁之前的build和config文件夹不见了,那么应该如何配置如webpack等的配那只需要在项目的根目录下vue.config.js 文件(是根目录,不是src目录语法 module.exports = { // 基本路径 baseUrl: '/', // 输出文件目录 outputDir: 'dist', // eslint-loader 是否在保存的时候检查 lintOnSave: true, // use the full build
vue-cli3.0 特性解读

最近的开发项目中使用了vue-cli 3.0,使用体验可以说非常棒了,模板更加制定化,配置更加简洁.以下总结下应用过程中的一些经验. 新建项目 # 安装 npm install -g @vue/cli # 新建项目 vue create my-project # 项目启动 npm run serve # 打包 npm run build 打包后的文件,对引用资源注入了预加载(preload/prefetch),启用 PWA 插件时注入 manifest/icon 链接,并且引入(inlines)
一份超级详细的Vue-cli3.0使用教程【推荐】

主要内容: 零配置启动/打包一个 .vue 文件详细的搭建过程重点推荐:使用图形化界面创建/管理/运行项目安装: 卸载旧版本: 如果你事先已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先卸载它: npm uninstall vue-cli -g Node版本要求: 3.x需要在 Node.js 8.9或更高版本(推荐8.11.0+),点击这里可以安装node 大多数人都安装过了node,使用下面的命令行查询你的node版本 : node -v 如果你的版本不够,可
vue-cli3 从搭建到优化的详细步骤

前言 github地址: https://github.com/LeeStaySmall/vue-project-demo (完整分支:optimize分支) demo地址: vue-project-demo.eloco.cn 安装与初始化架构安装 node >= 8.9 推荐:8.11.0 + 安装: npm install -g @vue/cli 检查: vue --version 如果已安装旧版本,需要先 npm uninstall vue-cli -g 卸载掉旧版本. 初始化架构创建
vue-cli3脚手架的配置及使用教程

这次给大家带来vue-cli3.0配置及使用详解,写给需要的朋友. Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供: 通过 @vue/cli 搭建交互式的项目脚手架. 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发. 一个运行时依赖 (@vue/cli-service),该依赖:一个丰富的官方插件集合,集成了前端生态中最好的工具. 可升级: 基于 webpack 构建,并带有合理的默认配置: 可以通过项目内的配置文件进行
解决vue-cli3 使用子目录部署问题

在使用 vue-cli3 build的时候,使用非子目录需要在 vue.config.js 中添加如下代码: module.exports = { baseUrl: process.env.NODE_ENV === 'production' ? '/dist/' : '/', } 但是build完后,放在nginx服务下,会看到如下报错,页面也显示 no-script 的内容 [Vue warn]: You are using the runtime-only build of Vue wher
vue新vue-cli3环境配置和模拟json数据的实例

最近在研究学习vue,发现环境配置特麻烦,就是跟着文档步骤一步一步来,也会遇到各种想不到的坑,vue-cli3的配置比老的简洁了很多,与以往的配置也有所不同: 1.安装步骤以前是 npm install vue-cli -g 现在是: npm install -g @vue/cli 2.vue-cli2 新建项目 vue init webpack Vue-Project vuecli3新建项目,在你创建后会有一个保存当前配置的功能 vue create <project-name> vue-c
详解项目升级到vue-cli3的正确姿势

一. 原以为升级vue-cli3的路线是这样的: 创建vue-cli3项目,按原有项目的配置选好各项配置迁移目录 src->src static->public 对比新旧 package.json ,然后 yarn install ,完毕. 然鹅... 运行项目,报错 You are using the runtime-only build of Vue...... : 然后去查了下旧项目的相关字眼文件: 噢,原来是vue-cli3的webpack相关文件都得自己写.于是乎根据官网的指引,在

vue-cli3使用mock数据的方法分析

相关推荐

随机推荐