Ⅰ、Mock 簡介：
1、什么是 Mock？
其一、Mock 的解釋一：
Mock 服務(wù)是指在測試過程中對于某些復(fù)雜（或者不太好構(gòu)造）的對象，用一個虛擬的對象替代它；對于前端來說，就是后臺數(shù)據(jù)還沒有造出來，前端就可以通過 Mock 的路徑或定義等，直接拿到想要的數(shù)據(jù)格式；
其二、Mock 的解釋二：
Mock 測試是以可控的方式模擬真實的對象行為。程序員通常創(chuàng)造模擬對象來測試對象本身該具備的行為，很類似汽車設(shè)計者使用碰撞測試假人來模擬車輛碰撞中人的動態(tài)行為；
2、為什么要使用 Mock？
其一、我認為 Mock 的作用是：
前端開發(fā)往往依賴于后端數(shù)據(jù)接口，在后端接口就緒能夠返回數(shù)據(jù)之前，前端通常很難開工; Mock 功能常用于解決數(shù)據(jù)模擬問題，有了 Mock 工具模擬數(shù)據(jù)后，前后端可以同步進入開發(fā)，提升團隊研發(fā)效率。
Ⅱ、在 Vue3 項目中引入 Mock:
1、安裝 Mock 與 vite-plugin-mock(插件) ：
其一、安裝命令為：
npm i mockjs vite-plugin-mock --save-dev
其二、版本為：mockjs: 1.1.0; vite-plugin-mock: 2.9.6;
2、安裝 axios 依賴：
// 一般情況下，mock 是與 axios 配合使用的，因為用 axios 來調(diào)用地址；
其一、安裝命令為：
npm i axios
其二、版本為：axios: 1.3.2;
3、在 vite.config.js 文件中配置 vite-plugin-mock 等信息
其一、代碼為：
import { viteMockServe } from 'vite-plugin-mock'
plugins: [vue(),
viteMockServe({
supportTs:false,
logger: false,
mockPath: "./mock/" // 注意：此時的 mockPath 地址是真正安裝的 mock 文件夾的地址;
})
]
// 在配的 viteMockServe({}) 中屬性說明：
supportTs?: boolean; --是否讀取ts文件模塊，設(shè)置為true時不能讀取js文件
logger?:boolean; --是否在控制臺顯示請求日志
mockPath?: string; --設(shè)置模擬數(shù)據(jù)的存儲文件夾，如果不是index.js需要寫明完整路徑
其二、vite.config.js 文件中的代碼為：
其三、vite 的配置文檔及 mockjs 的官方文檔：
A、vite 配置文檔地址：
https://vitejs.dev/config/
B、mockjs 的官方文檔：
http://mockjs.com/examples.html
4、創(chuàng)建 mock 文件夾：
其一、在根目錄下創(chuàng)建 mock 文件夾及 index.js 文件：
其二、創(chuàng)建 mock 文件夾后的目錄結(jié)構(gòu)：
Ⅲ、配置 mock 文件下 index.js 信息并生成相關(guān)數(shù)據(jù)：
1、index.js 中的代碼為：
// Mock 的語法問題：可參考官方文檔;
// 引入: mockjs 模塊;
import Mock from 'mockjs'
// 內(nèi)存模擬數(shù)據(jù)
const arr = []
// 循環(huán) 10 次，push 10 個對象;
for(let i =0; i < 10; i++) {
arr.push({
id: Mock.mock('@guid'),
name: Mock.mock('@cname'),
place: Mock.mock('@county(true)'),
})
}
// 下面是導(dǎo)出一個數(shù)組；
export default [
// 簡單模擬一個接口：若是 '/list' 請求，那么就會返回一個 arr;
{
// 發(fā)現(xiàn)不需要什么參數(shù)，get 方法，地址是 /list;
url:'/list', // 表示：請求的地址；
method: 'get', // 表示：請求的方式；
response: () => {
return arr
}
},
{
url:'/del',
method: 'delete',
response: ({query}) => {
const index = arr.findIndex((item) => item.id === query.id)
arr.splice(index,1)
return { sucess: true }
}
},
]
2、根據(jù) export default 中的 url 地址訪問：
// 此時是在訪問的地址后面，添加 '/list' 的 url 地址；
// 此時也說明成功使用了 Mock ,并生成了想要的數(shù)據(jù)信息；
3、頁面中調(diào)用 Mock 的過程:
其一、代碼為：
<script setup>
import { ref } from 'vue'
import axios from 'axios'
const list = ref([])
// 發(fā)請求肯定要用到 axios, 因此需要引入 axios;
const getList = async ()=> {
const r = await axios.get('/list') // 因為在 mock 的 index.js 里面，發(fā)現(xiàn)了一個不需要什么參數(shù)，get 方法，地址是 /list 的輸出；
// 因為這個項目是：在服務(wù)器的環(huán)境下，因此可以不加域名；
// 因為是異步的，因此需要用 async 和 await;
console.log(r);
}
// vue3 在組合式 api 的環(huán)境下，沒有 created() 這個函數(shù)，因此可以直接在 setup 里面調(diào)用函數(shù)；
getList()
</script>
其二、頁面顯示結(jié)果為：
文章來源：http://www.zghlxwxcb.cn/news/detail-529887.html
Ⅳ、小結(jié)：
其一、哪里有不對或不合適的地方，還請大佬們多多指點和交流！
其二、有興趣的話，可以多多關(guān)注這個專欄(Vue(Vue2+Vue3)面試必備專欄)：https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482文章來源地址http://www.zghlxwxcb.cn/news/detail-529887.html
到了這里，關(guān)于Vue3：在 VSCode 中如何成功安裝 Mockjs 及成功引入 Mock 的詳細過程的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
