ant-design-vue作为目前最火热的UI框架之一，自然也就需要我们去了解并使用。

本篇文章介绍在nuxt3中如何引入并使用ant-design-vue UI框架。

一、安装ant-design-vue

npm i --save ant-design-vue

如果npm长时间未正常安装完成，建议使用淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

二、在nuxt中配置

     1、跟目录下创建plugins文件夹

    2、plugins文件夹中创建ant-design-vue.ts。

    3、创建TS文件中引入ant-design-vue

// import { Button,Layout } from'ant-design-vue';//局部功能使用
import Antd from 'ant-design-vue'; //全局使用 
import 'ant-design-vue/dist/antd.css';//样式文件引入
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Antd);  //全局使用 
    // nuxtApp.vueApp.use(Button).use(Layout)//局部功能使用
});

三、页面中开始使用ant-design-vue

    直接在页面中复制ant-design-vue UI框架代码即可，如使用button

<a-button type="primary">Primary Button</a-button>

相对于nuxt2的对于插件的使用，nuxt3显得更为简便。nuxt2还需要在nuxt.config.ts文件中进行引入配置。但nuxt3完全移出了这个步骤。