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

10年服务1亿前端开发工程师

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

今天分享一下 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 应用程序 ,确实很方便,功能也很强大。

赞(3) 打赏
未经允许不得转载:WEB前端开发 » Vue CLI 3 环境中使用模拟数据(Mock)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏