目前vue最新的脚手架是vue-cli3，相比之前的vue-cli2，vue-cli3更轻便，而且新增了图形界面管理。但是想要用好vue-cli3呢，也需要开发者更了解webpack，vue-cli2与vue-cli3的比较，webpack的配置这些，都可以多了解一下，这里不多说，今天主要是简单讲一下在vue-cli3中，我们如何在本地模拟接口。
一、利用vue-cli3脚手架创建一个项目（本次以vuecli3-mock为例），过程如下
1、vue-cli3的安装。（这个对node版本有要求，必须是8.9以上版本）
输入指令： npm install @vue/cli -g
安装完成后可通过指令： vue --version 查看是否安装成功，若安装成功了，会显示当前vue版本。
2、创建项目：create vuecli3-mock（温馨提示：创建的项目名中是不支持大写的字母，可以是数字、小写字母、横线）
3、打开vuecli3-mock: cd vuecli3-mock
4、运行程序：npm run serve
5、打开浏览器，访问http://localhost:8080/
如何使用vue-cli3脚手架创建vue项目是基本完成了，那么本次的重点来了，如何在本地模拟后台接口数据
二、本地模拟数据
1、用编辑器打开刚刚创建的项目（我目前使用的是VS code编辑器，没有用过的朋友可以试试，非常不错哦），我们可以看到原生的项目结构如下
原生项目结构
那么我们需要在根目录下创建一个名为vue.config.js的配置文件，以及在根路径下创建一个名为data的文件夹，data文件下创建一个名为test.json（说明：data文件夹下存放所有模拟的json数据）
新增后的目录结构
test.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/components/HelloWorld.vue，引用axios，用axios请求接口数据，并显示出来
调用axios访问接口数据
最终结果
好了，本地模拟数据就到这里啦，当然，在真实项目中，我们为了更好的管理项目接口，一般是不会在每个页面直接通过axios.去访问接口的，我们会将接口进行封装。因为我们一般都希望能够集中管理所有的接口，把每个接口封装成一个方法，需要调用某个接口的时候直接调用该方法就好。这样也方便后期查看和维护。下章呢我将会写一下，如何封装API接口，统一管理API。
网友评论