Ant-Design-Vue快速上手指南+排坑

Ant-Design-Vue 是一个基于 Vue.js 的 UI 组件库，具有大量预构建的组件，能够帮助你快速构建现代化的用户界面。以下是一个快速上手指南以及一些常见坑的解决方法。

1. 快速上手指南
   1.1 安装
   确保你已经安装了 Vue.js 项目。如果还没有，请使用以下命令创建一个 Vue.js 项目：

vue create my-project

然后，安装 Ant Design Vue：

npm install ant-design-vue

1.2 引入样式
在 main.js 中全局引入 Ant Design Vue 组件和样式：

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(Antd).mount('#app');

1.3 使用组件
你可以直接在 Vue 组件中使用 Ant Design Vue 组件。例如，要使用按钮组件：

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

2. 常见坑及解决方法
   2.1 按需加载
   Ant Design Vue 包含大量组件，直接全局引入可能导致打包体积过大。解决方法是按需加载组件：

安装 babel-plugin-import 插件：

npm install babel-plugin-import --save-dev

修改 .babelrc 配置文件

{
  "plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true }]
  ]
}

在组件中按需引入：