Vue CLI 3 环境中使用模拟数据(Mock)

栏目: JavaScript · 发布时间: 6年前

内容简介:小编推荐:

Vue CLI 3 环境中使用模拟数据(Mock)

Vue CLI 3 环境中使用模拟数据(Mock)

小编推荐: 掘金是一个面向 程序员 的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

Vue CLI 3 主打自动化零配置确实很方便。有些地方还是需要进行一些配置,但是配置起来也非常简洁。

今天分享一下 Vue CLI 3 环境中使用模拟数据(Mock)的简单方法。

首先我们看一下目录结构:

Vue CLI 3 环境中使用模拟数据(Mock)

首先在根目录上创建个 mock 目录用于存放模拟数据,当然你可以根据你的喜好随便命名目录。我在这个目录下放了一个 index.json 模拟数据文件,当然你也可以使用 mock.js。

然后在根目录下新建一个 vue.config.js 文件,这文件是调整 webpack 配置最简单的方式,将会被 webpack-merge 合并入最终的 webpack 配置中。 在 vue.config.js 中编写以下内容:

const mockIndexData = require("./mock/index.json");

module.exports = {
  //...  
  devServer: {
    port: 8080,
    before(app) {
      app.get("/api/index", (req, res) => {
        res.json(mockIndexData);
      });
    }
  }
};

这样我们就可以在我们得组件中调用这个API了,例如:

import axios from "axios";

export default {
  name: "home",

  data() {
    return {
      // ... 
    };
  },
  components: {
    // ...  
  },
  mounted() {
    this.getHomeData();
  },
  methods: {
    getHomeData() {
      axios.get("/api/index").then(res => {
        console.log(res);
        // ...
      });
    }
  }
};

搞定!

Vue CLI 3 确实改进了很多,也方便了很多,对于对于不习惯用命令行的用户可以看看 使用 Vue CLI 用户界面 工具 用可视方式创建 Vue 应用程序 ,确实很方便,功能也很强大。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Egret——HTML5游戏开发指南

Egret——HTML5游戏开发指南

张鑫磊 等 / 电子工业出版社 / 2016-3 / 85

《Egret——HTML5游戏开发指南》由浅入深,在讲解游戏开发基础的同时提供众多实战案例供读者学习。《Egret——HTML5游戏开发指南》章节内容包含Egret基础概念及基础图形图像处理方法、网络相关操作、移动设备适配、性能优化、文本动画相关知识、调试技巧、DragonBones骨骼动画系统和P2物理引擎等。通过《Egret——HTML5游戏开发指南》,读者可以了解并掌握HTML5游戏开发技能......一起来看看 《Egret——HTML5游戏开发指南》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

URL 编码/解码
URL 编码/解码

URL 编码/解码