vue cli3项目使用本地模拟数据

目前vue最新的脚手架是vue-cli3，相比之前的vue-cli2，vue-cli3更轻便，而且新增了图形界面管理。但是想要用好vue-cli3呢，也需要开发者更了解webpack，vue-cli2与vue-cli3的比较，webpack的配置这些，都可以多了解一下，这里不多说，今天主要是简单讲一下在vue-cli3中，我们如何在本地模拟接口。

一、本地模拟数据

1、用编辑器打开刚刚创建的项目（我目前使用的是VS code编辑器，没有用过的朋友可以试试，非常不错哦），我们可以看到原生的项目结构如下

 

 

原生项目结构

          那么我们需要在根目录下创建一个名为vue.config.js的配置文件，以及在根路径下创建一个名为mock的文件夹，mock文件下创建一个名为menu.json（说明：mock文件夹下存放所有模拟的json数据）

新增后的目录结构

如上图

menu.json中模拟的数据

vue.config.js的配置

2、配置好如上数据，重新启动一下项目，运行npm run serve，我们可以通过访问http://localhost:8080/test  来获取到test.json中的数据了

 

 

3、安装axios，通过axios调用API接口

1）命令行中输入npm install --save axios

安装axios

2、打开src/layout/index.vue，引用axios，用axios请求接口数据，并显示出来

原文出处：
https://www.jianshu.com/p/993383798f30