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

1. 安装

首先确保项目中已经安装了 Node.js 和 npm 或 yarn。然后通过 npm 或 yarn 来安装 ant-design-vue。

# 使用 npm
npm install ant-design-vue --save

# 或者使用 yarn
yarn add ant-design-vue

2. 全局引入

在项目的主入口文件（如 main.js）中全局引入 Ant Design Vue 的样式和组件。

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

new Vue({
  render: h => h(App),
}).$mount('#app');

3. 按需加载

为了减小打包体积，可以使用按需加载的方式引入需要的组件。推荐使用 babel-plugin-import 插件来实现。
安装 babel-plugin-import

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

配置 .babelrc 或 babel-loader

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

使用组件

import { Button, Input } from 'ant-design-vue';

// 在组件中使用
<Button type="primary">按钮</Button>
<Input v-model="inputValue" placeholder="请输入内容" />

4. 常见问题及解决方案

        样式未正确加载：
                确保正确安装并配置了 ant-design-vue。
                检查 .babelrc 文件中的配置是否正确。
        组件未被识别：
                确认是否已正确导入组件。
                如果使用按需加载，请检查 babel-plugin-import 的配置。
        国际化支持：
                可以通过设置 locale 来实现多语言支持。

  import { ConfigProvider } from 'ant-design-vue';
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';

  new Vue({
    render: h => h(App),
  }).$mount('#app');

  // 设置全局语言
  ConfigProvider.config({ locale: zhCN });
  

5. 进阶使用

        自定义主题：
                通过修改变量来自定义主题颜色等。
                使用 less 编译器来编译 ant-design-vue 的源码。
        动态加载组件：
                使用 Vue 的异步组件功能结合按需加载插件。

6. 示例代码

下面是一个简单的示例，展示如何使用 Ant Design Vue 的 Button 组件。
App.vue

<template>
  <div id="app">
    <a-button type="primary">点击我</a-button>
  </div>
</template>

<script>
import { Button } from 'ant-design-vue';

export default {
  components: {
    'a-button': Button,
  },
};
</script>