init

src/components/Application/Application.vue

@@ -0,0 +1,34 @@
+<template>
+  <n-loading-bar-provider>
+    <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>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+export default defineComponent({
+  name: 'Application'
+})
+</script>
+
+<script lang="ts" setup>
+import {
+  NDialogProvider,
+  NNotificationProvider,
+  NMessageProvider,
+  NLoadingBarProvider
+} from 'naive-ui'
+
+// @ts-ignore
+import { MessageContent } from '@/components/MessageContent'
+// @ts-ignore
+import { DialogContent } from '@/components/DialogContent'
+</script>

src/components/Application/index.ts

@@ -0,0 +1,3 @@
+import AppProvider from './Application.vue';
+
+export { AppProvider };

src/components/DialogContent/index.ts

@@ -0,0 +1,3 @@
+import DialogContent from './index.vue';
+
+export { DialogContent };

src/components/DialogContent/index.vue

@@ -0,0 +1,12 @@
+<template></template>
+<script lang="ts">
+  import { useDialog } from 'naive-ui';
+
+  export default {
+    name: 'DialogContent',
+    setup() {
+      //挂载在 window 方便与在js中使用
+      window['$dialog'] = useDialog();
+    },
+  };
+</script>

src/components/MessageContent/index.ts

@@ -0,0 +1,3 @@
+import MessageContent from './index.vue';
+
+export { MessageContent };

src/components/MessageContent/index.vue

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