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