docs: add documentation on how to use vue-devui in nuxt3 projects

Author: kagol

packages/devui-vue/devui-cli/templates/vitepress-sidebar.js

@@ -65,6 +65,10 @@ exports.createVitepressSidebarTemplates = (componentsInfo = []) => {
           text: '主题定制',
           link: '/theme-guide/',
         },
+        {
+          text: '在 Nuxt3 中使用',
+          link: '/nuxt3/',
+        },
       ],
       handler: generateZhMenus,
       lang: 'zh',

packages/devui-vue/docs/components/message/index.md

@@ -15,71 +15,70 @@
 ```vue
 <template>
   <div class="demo-spacing">
-    <d-button  @click="open('normal')">normal</d-button>
-    <d-button  @click="open('success')">success</d-button>
-    <d-button  @click="open('error')">error</d-button>
-    <d-button  @click="open('warning')">warning</d-button>
-    <d-button  @click="open('info')">info</d-button>
-   </div>
+    <d-button @click="open('normal')">normal</d-button>
+    <d-button @click="open('success')">success</d-button>
+    <d-button @click="open('error')">error</d-button>
+    <d-button @click="open('warning')">warning</d-button>
+    <d-button @click="open('info')">info</d-button>
+  </div>
 </template>
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
   setup() {
-
-    function open (type) { 
+    function open(type) {
       this.$message({
         type,
-        message: 'this is a message.'
-      })
+        message: 'this is a message.',
+      });
     }
-    
+
     return { open };
-  }
+  },
 });
 </script>
 ```
+
 :::
 
 ### 可关闭消息提示
 
-默认的 Message 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 `showClose` 设置为 `true` 此外，默认的关闭时间为 3000 毫秒，当把这个属性（`duration`）的值设置为0便表示该消息不会被自动关闭。
+默认的 Message 是不可以被人工关闭的。 如果你需要手动关闭功能，你可以把 `showClose` 设置为 `true` 此外，默认的关闭时间为 3000 毫秒，当把这个属性（`duration`）的值设置为 0 便表示该消息不会被自动关闭。
 
 :::demo
 
 ```vue
 <template>
   <div class="demo-spacing">
-    <d-button  @click="closeIcon()">show close icon</d-button>
-    <d-button  @click="notClose()">not close</d-button>
-   </div>
+    <d-button @click="closeIcon()">show close icon</d-button>
+    <d-button @click="notClose()">not close</d-button>
+  </div>
 </template>
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
   setup() {
-
-    function closeIcon () {
+    function closeIcon() {
       this.$message({
-        type:'success',
-        message:'Show close button.',
+        type: 'success',
+        message: 'Show close button.',
         showClose: true,
       });
     }
 
-    function notClose () {
+    function notClose() {
       this.$message({
-        type:'info',
-        message:'Do not automatically close messages.',
+        type: 'info',
+        message: 'Do not automatically close messages.',
         showClose: true,
-        duration: 0
+        duration: 0,
       });
     }
-    
+
     return { closeIcon, notClose };
-  }
+  },
 });
 </script>
 ```
@@ -88,38 +87,36 @@ export default defineComponent({
 
 ### 超时时间
 
-通过设置`duration`来规定`message`所显示的时间以毫秒来规定(1000毫秒 => 1秒)，将这个属性设置为0则不会自动关闭。
+通过设置`duration`来规定`message`所显示的时间以毫秒来规定(1000 毫秒 => 1 秒)，将这个属性设置为 0 则不会自动关闭。
 
 :::demo
 
 ```vue
 <template>
   <div class="demo-spacing">
-    <d-button  @click="open()">show message 5000ms</d-button>
-   </div>
+    <d-button @click="open()">show message 5000ms</d-button>
+  </div>
 </template>
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
   setup() {
-
-    function open () { 
+    function open() {
       this.$message({
-        type:'success',
-        message:'show message 5000ms.',
+        type: 'success',
+        message: 'show message 5000ms.',
         duration: 5000,
         showClose: true,
       });
     }
-    
+
     return { open };
-  }
+  },
 });
 </script>
 ```
 
-
 :::
 
 ### 阴影和边框设置
@@ -133,44 +130,43 @@ export default defineComponent({
 ```vue
 <template>
   <div class="demo-spacing">
-    <d-button  @click="closeBordered()">close bordered</d-button>
-    <d-button  @click="closeShadow()">close shadow</d-button>
-    <d-button  @click="closeBAndS()">close bordered And shadow</d-button>
-   </div>
+    <d-button @click="closeBordered()">close bordered</d-button>
+    <d-button @click="closeShadow()">close shadow</d-button>
+    <d-button @click="closeBAndS()">close bordered And shadow</d-button>
+  </div>
 </template>
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
   setup() {
-
-    function closeBordered () {
+    function closeBordered() {
       this.$message({
-        type:'success',
-        message:'close bordered.',
+        type: 'success',
+        message: 'close bordered.',
         bordered: false,
       });
     }
 
-    function closeShadow () {
+    function closeShadow() {
       this.$message({
-        type:'info',
-        message:'close shadow.',
+        type: 'info',
+        message: 'close shadow.',
         shadow: false,
       });
     }
 
-    function closeBAndS () {
+    function closeBAndS() {
       this.$message({
-        type:'error',
-        message:'close shadow.',
+        type: 'error',
+        message: 'close shadow.',
         bordered: false,
         shadow: false,
       });
     }
-    
+
     return { closeBordered, closeShadow, closeBAndS };
-  }
+  },
 });
 </script>
 ```
@@ -179,87 +175,88 @@ export default defineComponent({
 
 ### 关闭回调
 
-通过onClose参数设置消息关闭时的回调。
+通过 onClose 参数设置消息关闭时的回调。
 :::demo
 
 ```vue
 <template>
   <div class="demo-spacing">
-    <d-button  @click="closeMessage()">close message</d-button>
-   </div>
+    <d-button @click="closeMessage()">close message</d-button>
+  </div>
 </template>
 <script>
 import { defineComponent } from 'vue';
 
 export default defineComponent({
   setup() {
-
-    function closeMessage () {
+    function closeMessage() {
       this.$message({
-        type:'success',
-        message:'close message.',
+        type: 'success',
+        message: 'close message.',
         onClose: () => {
           console.log('message closed');
         },
       });
     }
-    
+
     return { closeMessage };
-  }
+  },
 });
 </script>
 ```
 
 :::
 
 ### 多种用法
-调用message 消息的时候可以有多种调用方法和多种使用方式。
+
+调用 message 消息的时候可以有多种调用方法和多种使用方式。
 
 ##### 调用方式
+
 ```javascript
 // 第一种 全局调用
 this.$message('I call message globally');
 
 // 第二种 引入局部调用
-import { message } from 'vue-devui'
-message('I call message locally')
+import { Message } from 'vue-devui';
+message('I call message locally');
 ```
 
 ##### 使用方式
+
 ```javascript
-import { message } from 'vue-devui'
+import { Message } from 'vue-devui';
 
 // 传入字符串直接使用默认参数
 message('I am a default message');
 
 // 传入对象设置参数
 message({
-  message:'I am message',
+  message: 'I am message',
   type: 'info',
   bordered: false,
 });
 
 // 直接选择类型调用
 message.error('I am a error message');
 message.error({
-  message:'I am a error message',
+  message: 'I am a error message',
   bordered: false,
   shadow: false,
 });
 ```
 
 ### Message 参数
 
-| 参数名   | 类型               | 默认     | 说明                       | 跳转                          |
-| :------- | :----------------- | :------- | :------------------------- | :---------------------------- |
-| message  | `string` | ''  | 设置消息文字 | [基础用法](#基础用法) |
-| type  | `MessageType` | 'normal'| 设置消息内容类型   | [基础用法](#基础用法)   |
-| showClose | `Boolean`| false | 设置展示可关闭按钮 | [可关闭消息提示](#可关闭消息提示)   |
-| duration | `number`| 3000   | 设置超时时间         | [超时时间](#超时时间)   |
-| shadow | `Boolean`| true   | 设置是否展示阴影        | [阴影和边框设置](#阴影和边框设置)   |
-| bordered | `Boolean`| true   | 设置是否展示边框         | [阴影和边框设置](#阴影和边框设置)   |
-| on-close | `() => void` | - | 设置消息关闭时的回调 | [关闭回调](#关闭回调)         |
-
+| 参数名    | 类型          | 默认     | 说明                 | 跳转                              |
+| :-------- | :------------ | :------- | :------------------- | :-------------------------------- |
+| message   | `string`      | ''       | 设置消息文字         | [基础用法](#基础用法)             |
+| type      | `MessageType` | 'normal' | 设置消息内容类型     | [基础用法](#基础用法)             |
+| showClose | `Boolean`     | false    | 设置展示可关闭按钮   | [可关闭消息提示](#可关闭消息提示) |
+| duration  | `number`      | 3000     | 设置超时时间         | [超时时间](#超时时间)             |
+| shadow    | `Boolean`     | true     | 设置是否展示阴影     | [阴影和边框设置](#阴影和边框设置) |
+| bordered  | `Boolean`     | true     | 设置是否展示边框     | [阴影和边框设置](#阴影和边框设置) |
+| on-close  | `() => void`  | -        | 设置消息关闭时的回调 | [关闭回调](#关闭回调)             |
 
 ### Message 类型定义