vue3版本全局挂载方法不再绑定在vue实例上，这里我们将全局方法绑定在window实例上

首先定义一个组件用来挂载全局方法，名字根据个人喜好定义即可，这里以global.vue为例：

// global.vue
// 挂载window下方法组件
// 我是全局用路由控制页面，如果有其他嵌套组件布局等，引入相应的替换即可
<template>
    <router-view />
</template>

<script lang="ts" setup>
import { useDialog, useMessage } from "naive-ui";

// 将 dialog & message 实例方法挂载
// $message 和 $dialog 随个人喜好定义名称
// 注意不要太过于简单，以免污染其他全局定义
window.$message = useMessage();
window.$dialog = useDialog();
</script>

修改App.vue文件，将naive对应所需的n-message-provider和n-dialog-provider嵌套，注意如果为按需引入的方式，不要忘记import这两个组件：

// App.vue
<template>
    <n-message-provider>
        <n-dialog-provider>
            <global-container />
        </n-dialog-provider>
    </n-message-provider>
</template>

<script lang="ts" setup>
import { NMessageProvider, NDialogProvider } from "naive-ui";
// 引入上面你所定义的全局挂载组件
import GlobalContainer from "@/layout/global.vue";
</script>

这样就可以在全局调用了，不论是vue还是js文件：

// example.vue
<template>
    <div />
</template>

<script lang="ts" setup>
window.$dialog.warning({
	title: '警告',
	content: '你确定？',
	positiveText: '确定',
	negativeText: '不确定',
	onPositiveClick: () => {
		window.$message.success('确定')
	},
	onNegativeClick: () => {
		window.$message.error('不确定')
	}
})
</script>

// example.ts
window.$dialog.warning({
	title: '警告',
	content: '你确定？',
	positiveText: '确定',
	negativeText: '不确定',
	onPositiveClick: () => {
		window.$message.success('确定')
	},
	onNegativeClick: () => {
		window.$message.error('不确定')
	}
})

如果项目所使用ts，window会提示缺少相应定义：

这时需要自行定义一个相应的*.d.ts定义文件进行相应的定义，这里以index.d.ts为例：

// 引入naive对应的定义类型
import type { DialogApiInjection } from "naive-ui/lib/dialog/src/DialogProvider";
import type { MessageApiInjection } from "naive-ui/lib/message/src/MessageProvider";

declare global {
    interface Window {
        $message: MessageApiInjection;
        $dialog: DialogApiInjection;
    }
}

此时就能享受ts的快感了😍：

附上相关项目github地址：vue3-ts-admin-demo