Vue-cli项目中mockjs + axios实现前后端分离代码小demo(包括vue项目的创建)

692 阅读1分钟

今天学习了一下mockjs+axios模拟数据实现前后端分离,写一个小demo并记录一下,希望对vue的初学者有一点点帮助。(我的编辑器是webstorm,确保已经安装node.js,讲的比较基础)

首先,使用vue-cli脚手架搭建一个vue项目,参考webstorm创建并运行vue项目教程

第一步:安装axios和mock.js

npm install axios 

npm install mockjs

第二步:在src中新建mock.js文件

第三步:在main.js中全局引入axios插件(并设定为Vue的原型属性$axios)和mock.js文件

第四步:在HelloWorld.vue组件中使用axios发送请求并将响应数据渲染到html

第五步:执行npm run dev运行一下