基礎準備：

1、npm安裝vue-cli腳手架后，通過命令“ vue init webpack 項目名 ”來創建項目；
2、了解mockjs，能攔截ajax請求，返回模擬的響應數據，實現前后端分離；（詳細學習網址：https://blog.csdn.net/zhanglir333/article/details/78721585?或官網）
3、了解 axios，基于http客戶端的promise，面向瀏覽器和nodejs。

（詳細學習網址：https://www.jianshu.com/p/df464b26ae58 或官網）

第一步：安裝 mockjs 和 axios 插件

? cnpm install mockjs --save-dev? cnpm install axios ?--save-dev? 安裝完畢后，使用命令 npm run dev 運行項目

第二步：創建mock.js文件（包括引用mockjs插件，設定mock規則、攔截ajax請求）

第三步：在main.js中全局引入axios插件（并設定為Vue的原型屬性$http）和mock.js文件

第四步：在組件中使用axios發送請求并將響應數據渲染到html

注意：網上一些mockjs+axios的文章實際敲代碼會報錯，原因是沒有如上圖用that保存vue實例。還有要注意res.data.data才是mock出來并返回的數據數組
最后成功的效果：

總結

以上是生活随笔為你收集整理的Vue-cli项目中mockjs + axios实现前后端分离代码demo（清晰易懂）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。