37Vue入门教程Vue项目本地Mock数据

　　1. 学习目标
　　本小节我们将带大家学习如何在 Vue-Cli3 初始化的项目中创建 Mock 数据。 2. 简介
　　在日常开发中，接口的联调是非常普遍的。然而，有些时候接口并不会及时提供，这时候就需要我们自己 Mock 数据来模拟接口的实现。 3. 创建 Mock 数据
　　首先，我们在项目的根路径下创建 vue.config.js 文件，并在文件中写如下配置： module.exports = {   devServer: {     before(app) {       app.get(＂/goods/list＂, (req, res) => {         res.json({           data: [             {name: ＂Vue 基础教程＂},             {name: ＂React 基础教程＂}           ]         });       });     }   } };
　　我们通过 axios 来获取接口数据。首先需要安装 axios： npm install axios --save
　　在组件中使用 axios 获取 Mock 数据:  代码块123456789101112
　　有时候，我们需要写很多的 Mock 数据，把所有的数据都写在 vue.config.js 文件中显然是不合适的，这会使得文件变得非常大，并且难以维护。我们可以在项目中创建 Mock 文件夹，把所有数据放在 Mock 文件夹中维护。
　　我们在 Mock 文件夹中创建 list.json [   {＂name＂: ＂Vue 基础学习＂},   {＂name＂: ＂React 基础学习＂} ]
　　然后，在 vue.config.js 文件中加载数据： const list = require(＂./mock/list.json＂); module.exports = {   devServer: {     before(app) {       app.get(＂/goods/list＂, (req, res) => {         res.json({           data: list         });       });     }   } };  4. 小结
　　本节我们带大家学习了如何在项目中使用 Mock 数据。