Vue3 全局公共函数完整方案（创建、挂载、引用、使用）

文章目录

• 一、标准目录结构（必须这样建）
• 二、第一步：创建公共函数
• • [1. 创建地图工具：`src/utils/olUtils.js`](#1. 创建地图工具：src/utils/olUtils.js)
  • [2. 创建数据过滤工具：`src/utils/filter.js`](#2. 创建数据过滤工具：src/utils/filter.js)
  • [3. 统一出口：`src/utils/index.js`](#3. 统一出口：src/utils/index.js)
• 三、第二步：全局注册（两种方式）
• • [方式1：挂载到全局（所有页面不用 import）](#方式1：挂载到全局（所有页面不用 import）)
  • • `main.js`
  • 方式2：配置路径别名（最舒服）
• 四、第三步：在页面中如何使用？（三种用法）
• • [用法1：`<script setup>` 最推荐（直接 import）](#用法1：<script setup> 最推荐（直接 import）)
  • [用法2：使用全局挂载（不用 import）](#用法2：使用全局挂载（不用 import）)
  • [用法3：选项式 API](#用法3：选项式 API)
• 五、全局函数使用规范（企业级）
• • [1. 工具函数必须：](#1. 工具函数必须：)
  • [2. 哪些功能适合写进全局工具？](#2. 哪些功能适合写进全局工具？)
  • [3. 不适合写进全局：](#3. 不适合写进全局：)
• 六、给你一套**直接放进你项目**的终极模板
• • [1. `src/utils/olUtils.js`（地图图标、坐标）](#1. src/utils/olUtils.js（地图图标、坐标）)
  • [2. `src/utils/filter.js`（你的字段过滤）](#2. src/utils/filter.js（你的字段过滤）)
  • [3. `src/utils/index.js`](#3. src/utils/index.js)
  • [4. `main.js`](#4. main.js)
  • [5. 任意页面使用](#5. 任意页面使用)
• 七、一句话总结（最关键）

给你最标准、企业级、新手一看就会的全局函数方案，包含：文件夹位置 → 创建方法 → 全局注册 → 页面使用 → 实战示例。把 文件夹规范、注册、引用、页面使用、注意事项、实战场景 全部一次性讲透，你照着做就能搭建企业级规范工具库。

一、标准目录结构（必须这样建）

src/
├── utils/             【工具函数根目录】
│   ├── index.js       【主入口：统一导出所有函数】
│   ├── olUtils.js     【分文件：OpenLayers地图专用工具】
│   ├── format.js      【分文件：格式化工具】
│   └── filter.js      【分文件：数据过滤工具】
├── main.js            【全局注册入口】
└── src/xxx.vue        业务页面

为什么要分文件？

• 函数多了不会乱
• 按需加载，性能更好
• 团队协作清晰
• 维护方便

---

二、第一步：创建公共函数

1. 创建地图工具：src/utils/olUtils.js

// OpenLayers SVG 图标生成
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, '')
}

// 坐标转换
export function wgs84ToMercator(lon, lat) {
  return import.meta.env.VITE_APP_PROJECTION === 'EPSG:3857'
    ? [lon, lat]
    : fromLonLat([lon, lat])
}

2. 创建数据过滤工具：src/utils/filter.js

// 根据配置 isShow 过滤对象字段
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. 统一出口：src/utils/index.js

// 统一导出所有工具函数
export * from './olUtils'
export * from './filter'

---

三、第二步：全局注册（两种方式）

方式1：挂载到全局（所有页面不用 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')

挂载后全局可访问：

• this.$utils
• proxy.$utils
• getCurrentInstance().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'

---

四、第三步：在页面中如何使用？（三种用法）

用法1：<script setup> 最推荐（直接 import）

<script setup>
// 直接导入需要的函数
import { getSvgMarker, filterByShowConfig } from '@utils'

// 使用 SVG
const marker = getSvgMarker('blue')

// 使用数据过滤
const A = {}
const B = {}
const filteredData = filterByShowConfig(A, B)
</script>

用法2：使用全局挂载（不用 import）

<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

// 直接使用全局函数
const icon = proxy.$utils.getSvgMarker('red')
const result = proxy.$utils.filterByShowConfig(A, B)
</script>

用法3：选项式 API

<script>
export default {
  mounted() {
    const icon = this.$utils.getSvgMarker('green')
  }
}
</script>

---

五、全局函数使用规范（企业级）

1. 工具函数必须：

• 纯函数（不修改外部变量）
• 独立功能
• 有注释
• 有默认参数
• 支持复用

2. 哪些功能适合写进全局工具？

• 数据格式化
• 字段过滤
• OpenLayers 样式、图标、坐标转换
• 防抖、节流
• 时间、金额格式化
• 经纬度处理
• 地图通用方法
• 表单校验

3. 不适合写进全局：

• 页面私有逻辑
• 接口请求（放 api 文件夹）
• 状态管理（放 store）

---

六、给你一套直接放进你项目的终极模板

1. src/utils/olUtils.js（地图图标、坐标）

import { fromLonLat } from 'ol/proj'

// SVG 地图标点
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>`
}

// 坐标转墨卡托
export function toMercator(lon, lat) {
  return fromLonLat([Number(lon), Number(lat)])
}

2. src/utils/filter.js（你的字段过滤）

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. 任意页面使用

<script setup>
import { getSvgIcon, filterByConfig } from '@utils'

// 地图图标
const icon = getSvgIcon('#0088ff')

// 数据过滤
const filtered = filterByConfig(A, B)
</script>

---

七、一句话总结（最关键）

• 公共函数放 src/utils/
• 统一导出 index.js
• 全局挂载 main.js → $utils
• 页面直接 import 或 proxy.$utils
• 你的地图、过滤、格式化全部能全局复用

---