1. 创建Vue项目 

确保已安装Vue CLI，通过命令创建新项目：

vue create ant - vue - project
cd ant - vue - project

2. 安装Ant Design Vue 

使用npm或yarn安装Ant Design Vue组件库：

npm install ant - design - vue
# 或
yarn add ant - design - vue

3. 引入Ant Design Vue 

全局引入：在 main.js 中引入Ant Design Vue及其样式。

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


Vue.use(Antd);


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

 按需引入：借助 babel - plugin - import 实现按需引入。

安装插件：

npm install babel - plugin - import - D
# 或
yarn add babel - plugin - import - D

 修改 babel.config.js 文件：

module.exports = function (api) {
  api.cache(true);
  const presets = [
    '@vue/cli - babel/preset - app'
  ];
  const plugins = [
    ['import', {
      libraryName: 'ant - design - vue',
      libraryDirectory: 'es',
      style: 'css'
    }]
  ];
  return { presets, plugins };
};

 在组件中按需引入，如在 HelloWorld.vue 中：

<template>
  <div>
    <a - button type="primary"> 主要按钮 </a - button>
  </div>
</template>


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


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

4. 使用Ant Design Vue组件 

以按钮组件为例，在模板中可这样使用：

<template>
  <div id="app">
    <a - button type="primary"> 主要按钮 </a - button>
    <a - button> 普通按钮 </a - button>
  </div>
</template>

更多组件使用方法

参考Ant Design Vue 官方文档：

(https://2x.antdv.com/docs/vue/introduce - cn) 。

阅读原文：原文链接