Vue3實(shí)現(xiàn)全局公共函數(shù)的完整方案(創(chuàng)建、掛載、引用、使用)
更新時(shí)間：2026年03月15日 08:20:41 作者：還是大劍師蘭特
本文詳細(xì)介紹了如何在Vue3項(xiàng)目中創(chuàng)建、掛載、引用和使用全局公共函數(shù),包括標(biāo)準(zhǔn)目錄結(jié)構(gòu)、創(chuàng)建公共函數(shù)、全局注冊(cè)、頁(yè)面使用以及規(guī)范,通過(guò)本文,新手開(kāi)發(fā)者可以快速搭建企業(yè)級(jí)規(guī)范工具庫(kù),需要的朋友可以參考下
給你最標(biāo)準(zhǔn)、企業(yè)級(jí)、新手一看就會(huì)的全局函數(shù)方案，包含：文件夾位置 → 創(chuàng)建方法 → 全局注冊(cè) → 頁(yè)面使用 → 實(shí)戰(zhàn)示例。把 文件夾規(guī)范、注冊(cè)、引用、頁(yè)面使用、注意事項(xiàng)、實(shí)戰(zhàn)場(chǎng)景全部一次性講透，你照著做就能搭建企業(yè)級(jí)規(guī)范工具庫(kù)。
一、標(biāo)準(zhǔn)目錄結(jié)構(gòu)（必須這樣建）
src/ ├── utils/ 【工具函數(shù)根目錄】 │ ├── index.js 【主入口：統(tǒng)一導(dǎo)出所有函數(shù)】 │ ├── olUtils.js 【分文件：OpenLayers地圖專(zhuān)用工具】 │ ├── format.js 【分文件：格式化工具】 │ └── filter.js 【分文件：數(shù)據(jù)過(guò)濾工具】 ├── main.js 【全局注冊(cè)入口】 └── src/xxx.vue 業(yè)務(wù)頁(yè)面
為什么要分文件？
- 函數(shù)多了不會(huì)亂
- 按需加載，性能更好
- 團(tuán)隊(duì)協(xié)作清晰
- 維護(hù)方便
二、第一步：創(chuàng)建公共函數(shù)
1. 創(chuàng)建地圖工具：src/utils/olUtils.js
// OpenLayers SVG 圖標(biāo)生成
export function getSvgMarker(color = '#ff4400') {
return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="${color}" stroke="#fff" stroke-width="5"/>
</svg>`.replace(/\s+/g, '')
}
// 坐標(biāo)轉(zhuǎn)換
export function wgs84ToMercator(lon, lat) {
return import.meta.env.VITE_APP_PROJECTION === 'EPSG:3857'
? [lon, lat]
: fromLonLat([lon, lat])
}2. 創(chuàng)建數(shù)據(jù)過(guò)濾工具：src/utils/filter.js
// 根據(jù)配置 isShow 過(guò)濾對(duì)象字段
export function filterByShowConfig(data, config) {
const result = {}
for (const key in data) {
if (config[key] && config[key].isShow === true) {
result[key] = data[key]
}
}
return result
}
3. 統(tǒng)一出口：src/utils/index.js
// 統(tǒng)一導(dǎo)出所有工具函數(shù) export * from './olUtils' export * from './filter'
三、第二步：全局注冊(cè)（兩種方式）
方式1：掛載到全局（所有頁(yè)面不用 import）
main.js
import { createApp } from 'vue'
import App from './App.vue'
import * as $utils from './utils/index' // 引入
const app = createApp(App)
app.config.globalProperties.$utils = $utils // 全局掛載
app.mount('#app')
掛載后全局可訪問(wèn)：
this.$utilsproxy.$utilsgetCurrentInstance().proxy.$utils
方式2：配置路徑別名（最舒服）
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'@utils': path.resolve(__dirname, 'src/utils')
}
}
})
之后可以這樣引用：
import { getSvgMarker } from '@utils'
四、第三步：在頁(yè)面中如何使用？（三種用法）
用法1：<script setup>最推薦（直接 import）
<script setup>
// 直接導(dǎo)入需要的函數(shù)
import { getSvgMarker, filterByShowConfig } from '@utils'
// 使用 SVG
const marker = getSvgMarker('blue')
// 使用數(shù)據(jù)過(guò)濾
const A = {}
const B = {}
const filteredData = filterByShowConfig(A, B)
</script>
用法2：使用全局掛載（不用 import）
<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
// 直接使用全局函數(shù)
const icon = proxy.$utils.getSvgMarker('red')
const result = proxy.$utils.filterByShowConfig(A, B)
</script>
用法3：選項(xiàng)式 API
<script>
export default {
mounted() {
const icon = this.$utils.getSvgMarker('green')
}
}
</script>
五、全局函數(shù)使用規(guī)范（企業(yè)級(jí)）
1. 工具函數(shù)必須：
- 純函數(shù)（不修改外部變量）
- 獨(dú)立功能
- 有注釋
- 有默認(rèn)參數(shù)
- 支持復(fù)用
2. 哪些功能適合寫(xiě)進(jìn)全局工具？
- 數(shù)據(jù)格式化
- 字段過(guò)濾
- OpenLayers 樣式、圖標(biāo)、坐標(biāo)轉(zhuǎn)換
- 防抖、節(jié)流
- 時(shí)間、金額格式化
- 經(jīng)緯度處理
- 地圖通用方法
- 表單校驗(yàn)
3. 不適合寫(xiě)進(jìn)全局：
- 頁(yè)面私有邏輯
- 接口請(qǐng)求（放 api 文件夾）
- 狀態(tài)管理（放 store）
六、給你一套直接放進(jìn)你項(xiàng)目的終極模板
1.src/utils/olUtils.js（地圖圖標(biāo)、坐標(biāo)）
import { fromLonLat } from 'ol/proj'
// SVG 地圖標(biāo)點(diǎn)
export function getSvgIcon(color = '#ff4400') {
return `data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><circle cx="16" cy="16" r="14" fill="${color}" stroke="#fff" stroke-width="2"/></svg>`
}
// 坐標(biāo)轉(zhuǎn)墨卡托
export function toMercator(lon, lat) {
return fromLonLat([Number(lon), Number(lat)])
}
2.src/utils/filter.js（你的字段過(guò)濾）
export function filterByConfig(data, config) {
let res = {}
for (let k in data) {
if (config[k]?.isShow) res[k] = data[k]
}
return res
}
3.src/utils/index.js
export * from './olUtils' export * from './filter'
4.main.js
import * as $utils from './utils' app.config.globalProperties.$utils = $utils
5. 任意頁(yè)面使用
<script setup>
import { getSvgIcon, filterByConfig } from '@utils'
// 地圖圖標(biāo)
const icon = getSvgIcon('#0088ff')
// 數(shù)據(jù)過(guò)濾
const filtered = filterByConfig(A, B)
</script>
七、一句話總結(jié)（最關(guān)鍵）
- 公共函數(shù)放
src/utils/ - 統(tǒng)一導(dǎo)出
index.js - 全局掛載
main.js→$utils - 頁(yè)面直接
import或proxy.$utils - 你的地圖、過(guò)濾、格式化全部能全局復(fù)用
以上就是Vue3實(shí)現(xiàn)全局公共函數(shù)的完整方案(創(chuàng)建、掛載、引用、使用)的詳細(xì)內(nèi)容，更多關(guān)于Vue3全局公共函數(shù)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue之Vue.use的使用場(chǎng)景及說(shuō)明
這篇文章主要介紹了vue之Vue.use的使用場(chǎng)景，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue解決echart在element的tab切換時(shí)顯示不正確問(wèn)題
這篇文章主要介紹了Vue解決echart在element的tab切換時(shí)顯示不正確問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能
本系列文章介紹一個(gè)簡(jiǎn)單的實(shí)時(shí)定位示例，基于VUE + OPENLAYERS實(shí)現(xiàn)實(shí)時(shí)定位功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-09-09
Vue配置文件中的devServer proxy配置全過(guò)程
文章介紹了如何在代理服務(wù)器中配置axios請(qǐng)求,包括單個(gè)接口和多個(gè)接口的情況,通過(guò)配置proxy,可以將請(qǐng)求轉(zhuǎn)發(fā)到不同的后端服務(wù)器,并且可以處理跨域請(qǐng)求和路徑重寫(xiě)2025-12-12
vue實(shí)現(xiàn)在一個(gè)方法執(zhí)行完后執(zhí)行另一個(gè)方法的示例
今天小編就為大家分享一篇vue實(shí)現(xiàn)在一個(gè)方法執(zhí)行完后執(zhí)行另一個(gè)方法的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue常用指令有v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-html指令、v-text指令、v-bind指令、v-on指令、v-model指令等等,下面這篇文章主要給大家介紹了八個(gè)Vue中常用的v指令的相關(guān)資料,需要的朋友可以參考下2022-04-04
Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法
這篇文章主要介紹了Vue3中實(shí)現(xiàn)拖拽和縮放自定義看板 vue-grid-layout的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
Vue3中element-plus全局使用Icon圖標(biāo)的過(guò)程詳解
我們?cè)谟胿ue開(kāi)發(fā)網(wǎng)站的時(shí)候,往往圖標(biāo)是起著很重要的作,這篇文章主要給大家介紹了關(guān)于Vue3中element-plus全局使用Icon圖標(biāo)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
這篇文章主要給大家介紹了關(guān)于如何基于Vue3封裝一個(gè)好用的Websocket的相關(guān)資料,在Vue3中我們可以將Websocket類(lèi)封裝成一個(gè)Vue插件,以便全局使用,需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于vue3?Props的用法(父?jìng)髯?的相關(guān)資料,在Vue3中Props用于組件間數(shù)據(jù)傳遞,允許類(lèi)型檢查和默認(rèn)值設(shè)置,文中將用法介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10