Vue3使用Naive UI Message等组件

Navive UI官方文档
有提示：

在 vue3 中的setup里无法直接使用，现在要使用的话需要进行如下操作：

1、创建其他组件用于存放 Message,路径如下：

index.ts内容如下：

import MessageContent from './index.vue';

export { MessageContent };

index.vue内容如下:

<template></template>
<script lang="ts">
  import { useMessage } from 'naive-ui';
  export default {
    name: 'MessageContent',
    setup() {
      //挂载在 window 方便与在js中使用
      window['$message'] = useMessage();
    },
  };
</script>

 2、创建<n-message-provider>所在组件，路径如下：

Application.vue内容如下：（这里顺便把其他常用的组件一起封装了，方便后续使用，要是就用message就只要封装一个就行

         <n-message-provider>
            <MessageContent />
            <slot></slot>
          </n-message-provider>

保留这一段即可

）

<template>
  <NConfigProvider>
    <n-loading-bar-provider>
      <LoadingBarContent />
      <n-dialog-provider>
        <DialogContent />
        <n-notification-provider>
          <n-message-provider>
            <MessageContent />
            <slot></slot>
          </n-message-provider>
        </n-notification-provider>
      </n-dialog-provider>
    </n-loading-bar-provider>
  </NConfigProvider>
</template>

<script lang="ts" setup>
  import { MessageContent } from '@/components/Application/content/Message';
  import { DialogContent } from '@/components/Application/content/Dialog';
  import { LoadingBarContent } from '@/components/Application/content/Loadingbar';
  import {
    NConfigProvider,
    NDialogProvider,
    NNotificationProvider,
    NMessageProvider,
    NLoadingBarProvider,
  } from 'naive-ui';

</script>

index.ts内容如下：

// @ts-ignore
import AppProvider from './Application.vue';
export { AppProvider  };

 3、系统如何使用：

在App.vue引用：

<template>
  <div id="app">
    <AppProvider>
      <router-view></router-view>
    </AppProvider>

  </div>

</template>
<script setup lang="ts">
import {RouterView} from 'vue-router'
import { AppProvider } from '@/components/Application';

</script>
<style scoped>

</style>

然后就可以在其他vue里直接使用了：

    import {  useMessage } from 'naive-ui'
    const message=useMessage();
    message.info("开始使用");