Nuxt项目引入antd vue组件全过程

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

• 前言
• 一、pandas是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

        antd的ui库如何在nuxt项目中使用呢

一、npm i --save ant-design-vue

二、使用步骤

        

1. 在plugins中创建ant-design-vue.js

    

   2.nuxt.config.js 中进行配置

   代码如下：

     // Global CSS: https://go.nuxtjs.dev/config-css
     css: ['ant-design-vue/dist/antd.css'],
   
     // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
     plugins: ["@/plugins/antd-ui"],

然后可以在组件内使用antd的各种ui组件，例如轮播图（走马灯）组件

<a-carousel ref="img" dots>
              <div v-for="(item,index) in bannerImgs"><img :src="item.img" alt="" class="bannerimg"></div>
          </a-carousel>