vue mock的模組化開發

如果我們需要真正的使用mock去做對應後台的資料模擬開發，那麼我們所有的mock肯定不能放在index.js裡，這樣很容易與他人**衝突。這裡我將提供我的思路，有什麼不成熟的地方還望及時溝通。

以下便是專案結構：

丨- store

丨- modules

- item.js

- index.js

其中最主要的就是index.js的配置：

// 匯入mockjs

import mock from
'mockjs'
// 自動引入mock模組
const mockarrnew = require.
context
('./modules'
,true,/
.js$/)
// 獲取引入的mock模組，分別執行mock.mock，，適用於vue2
mockarrnew.
keys()
.foreach
(key
=>
)// vue3棄用了require.context，所以我們使用：
const mockarrnew =
import
.meta.
globeager
('./modules/*.js'
)object.
values
(mockarrnew)
.map(el
=>el.default[0]
).foreach
(key
=>
)

需要注意當前使用vue版本是否為vue3，vue3是不支援require.context的，需要格外注意。

此外，import.meta.globeager無法遍歷子目錄，可能需要更改編寫習慣。

modules下js編寫示例如下：

let res =

function
pduser
(option
)else
if(option.username ==
'youke'
&& option.password ==
'123456'
)else
}// 可以通過這個模擬乙個api的介面
let mock =
}export
default
[mock]
//這裡注意一下

喜歡的話不妨點個小小的贊與關注，您的贊與關注將是我源源不斷的前進動力。

模組化開發

講模組化開發之前，我們先了解一下 傳統開發模式 是什麼？比如說a所在的公司在做乙個專案，公司安排a跟b還有c三個人一起協同開發，a負責一部分功能塊，b負責另一部分功能塊，把專案的功能分成一塊一塊，這適用於多人協作開發，每個人負責不同的功能塊，當然，這其中有人是負責整合的，有人是負責開發公共功能塊的等...

模組化開發

commonjs規範 同步模式載入模組，導致效率低 node.js環境 乙個檔案就是乙個模組 每個模組都有單獨地作用域 通過module.exports匯出成員 通過require函式載入模組 amd asynchronous module definition 規範 使用相對複雜 模組js檔案請求...

模組化開發

寫在前面 面試時常被問到，你知道什麼是模組化開發嗎？模組化開發能帶來什麼好處？下面的內容可以幫助你簡單了解什麼是模組化開發，從對它模糊的印象中看到一些清晰的輪廓，幫助你了解模組化開發的現狀，以對選擇哪種模組化開發有個選擇的方向。目錄 什麼是模組化開發 模組化開發的意義 模組化開發的好處 1 避免變數...