基礎(chǔ)準(zhǔn)備：

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

（詳細學(xué)習(xí)網(wǎng)址：https://www.jianshu.com/p/df464b26ae58 或官網(wǎng)）

第一步：安裝 mockjs 和 axios 插件

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

第二步：創(chuàng)建mock.js文件（包括引用mockjs插件，設(shè)定mock規(guī)則、攔截ajax請求）

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

第四步：在組件中使用axios發(fā)送請求并將響應(yīng)數(shù)據(jù)渲染到html

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。