1. nuxt3 和 antd 在本地安装完成后，根据nuxt官网介绍完善相关目录。
2. 在 plugins 文件夹下新建文件 antd.client.ts

   // plugins/antd.client.ts
   
   import Antd from "ant-design-vue";
   import 'ant-design-vue/dist/antd.css';
   
   export default defineNuxtPlugin((nuxtApp) => {
     nuxtApp.vueApp.use(Antd)
   })
   

3. 事情还没有结束，此时 npm run dev 你会发现页面报错，不要急，接下来在 pages 文件夹下新建一个文件夹，比如新建一个 home/index.vue 文件

   // pages/home/index.vue
   
   <template>
     <div>home page</div>
   </template>
   

此时再次刷新页面，你就会发现页面可以正常显示组件了！

除此之外还有一些奇奇怪怪的小问题，比如新建一个文件后，直接通过url访问页面会报404，但通过<NuxtLink /> 标签跳转的话，唉！你会发现他又可以访问了…或者在更新一个页面的代码后，浏览器 F5 刷新会报错，再次 F5 一下，唉！他又行了…

2023-09-26 更新

当前 Nuxt3 已更新至3.7.4稳定版，项目上可以正常使用。

Ant-Design-Vue 现也已支持在 Nuxt3 导入，导入方式如下：

1. 将 @ant-design-vue/nuxt 依赖项添加到项目中

   # Using pnpm
   pnpm add -D @ant-design-vue/nuxt
   
   # Using yarn
   yarn add --dev @ant-design-vue/nuxt
   
   # Using npm
   npm install --save-dev @ant-design-vue/nuxt
   

2. 将 @ant-design-vue/nuxt 添加到 nuxt.config.ts 的 modules 部分

   export default defineNuxtConfig({
     modules: [
       '@ant-design-vue/nuxt'
     ],
     antd:{
       // Options
     }
   })
   

3. 现在你可以在Nuxt应用中使用 ant-design-vue 了

   <script lang="ts" setup>
   const handleMessage = () => {
     message.info("This is a normal message");
   }
   </script>
   <template>
     <a-button @click="handleMessage">
       button
     </a-button>
   </template>