Vue 3中实现全局消息通知有两种主流方案：Sonner轻量现代，两步即可使用toast函数；Element Plus需手动挂载$messsage并补全类型，适合已有项目。推荐封装业务语义化提示工具统一管理文案、错误码和埋点。

Vue 3 项目中配置全局消息通知，核心目标是：**不用每个组件都 import，直接调用函数（如 toast 或 $message）就能弹出提示**。Sonner 和 Element Plus 是两种不同风格的方案，适用场景略有差异——Sonner 更轻量现代、开箱即用；Element Plus 更适合已集成该 UI 库的中后台系统。下面分两路说明，清晰可落地。

用 Vue Sonner 实现全局 Toast（推荐新项目/轻量需求）

Sonner 是专为 Vue 3 设计的高性能 Toast 库，自带动画、堆叠管理、滑动关闭，无需挂载全局属性，只需两步：

• 安装：pnpm add vue-sonner（或 yarn/npm）
• 在根组件（如 App.vue）模板中插入 <toaster></toaster>，位置建议放在最外层容器内（如 <div id="app"> 下） <li> <strong>任意组件中直接解构使用</strong>：<code>import { toast } from 'vue-sonner'，然后 toast.success('保存成功')、toast.error('网络异常') 等
• 如需在 <script setup></script> 中统一注入（避免重复 import），可在 main.ts 中通过 app.provide 注册：
  app.provide('toast', toast)，之后在组件中用 const { toast } = inject('toast') 或配合 Nuxt 插件方式自动注入

用 Element Plus 的 ElMessage / ElNotification 全局挂载（适合已有 Element 项目）

Element Plus 默认未将 ElMessage 等函数注册为全局方法，需手动挂载才能像 this.$message 那样使用：


Springboot Vue Builder
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
下载
• 在 main.ts 中挂载：
  import { createApp } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
const app = createApp(App)
app.config.globalProperties.$message = ElMessage
app.config.globalProperties.$notify = ElNotification
• TypeScript 类型支持不能少：在 src/shims-vue.d.ts 或单独类型文件中补充声明：
  declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $message: typeof ElMessage
    $notify: typeof ElNotification
  }
}
• 在 Options API 组件中直接用：this.$message.success('操作完成')
  在 <script setup></script> 中：可用 getCurrentInstance()?.proxy?.$message（不推荐），更推荐按需导入 ElMessage —— 它本身已是函数式 API，无需挂载也能用，挂载主要是为了统一写法和类型推导

进阶建议：封装一层业务提示工具（强烈推荐）

无论选 Sonner 还是 Element，直接裸调 UI 库 API 容易导致文案不一致、错误码处理散落、埋点缺失。建议加一层薄封装：

立即学习“前端免费学习笔记（深入）”；

• 新建 src/utils/notice.ts，导出 success(msg)、error(res)、apiError(err) 等语义化方法
• 在 apiError 中统一解析响应状态码，映射成用户友好的提示（如 401 → '登录已过期，请重新登录'）
• 所有提示默认加埋点（如 logEvent('notice_show', { type: 'error', code: err.code })）
• 对外暴露的仍是简单函数，内部可自由切换底层实现（今天用 Sonner，明天换自研组件也不影响业务代码）

两种方案都不复杂，但容易忽略类型补全和封装层级。选 Sonner 图快图新，选 Element 挂载图稳图统一。真正提升体验的，其实是那一层业务语义封装。