全局方法使用指南-vue3的H5项目从0到1工程化落地经验篇3

每个项目中都有很多全局方法，我的项目中使用全局方法的方式是独立的utils文件。

全局方法常用于需要跨组件复用的工具函数、服务接口或通用逻辑。

怎么配置上？

在项目根目录下创建utils文件夹，再创建index.js文件。如果大家使用我的vue3模板项目——vue3+vite6+js+vue-router4+tailwind CSS+vant+Element Plus项目template，里边已经包含，不需要再自行创建了。

更进一步的是这样：

src/
└── utils/
    ├── index.ts          # 统一出口文件
    ├── date.ts          # 日期相关工具
    ├── string.ts        # 字符串处理
    ├── dom.ts           # DOM 操作
    ├── validate.ts      # 验证函数
    ├── storage.ts       # 本地存储封装
    ├── money.ts         # 金额处理
    └── types/          # 类型声明（TS项目）

怎么挂载到vue?

在 Vue3 中，全局挂载方法与 Vue2 有所不同。在 Vue2 中，我们通常使用 Vue.prototype  来挂载全局方法，而在 Vue3 中，我们使用 app.config.globalProperties 来实现这一功能。

// main.js
import * as utils from '@/utils' // 导入所有 utils 方法

const app = createApp(App)

// 挂载到全局（推荐加 $ 前缀避免冲突）
app.config.globalProperties.$utils = utils

在组件中使用：this.$utils.getParamFromUrl('register_code')

项目中常用的方法

// 获取url中的参数-这是现代js的写法， 因为原来没有url对象的时候得写一堆。
export function getParamFromUrl(paramName, url = window.location.href) {
  const urlObj = new URL(url)
  return urlObj.searchParams.get(paramName)
}

方法不断补充中。大家有好方法也可以写在评论中。我们共建一个好的项目模板。