Ant Design 在 Vue CLI 3 的引入

首先你必须有一个 Vue CLI 3 的项目，快速搭建见：

https://blog.csdn.net/qq_39291919/article/details/108805955

引入依赖

---

从 yarn 或 npm 安装并引入 ant-design-vue。

npm install ant-design-vue -S

完整引入

---

以下是完整引入的示例。

1. 导入 ant-design-vue 模块。import Antd from 'ant-design-vue'

2. 导入 CSS 样式。import 'ant-design-vue/dist/antd.css'

3. Vue 使用注入插件。Vue.use(Antd)

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

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

局部引入

---

import Vue from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';

Vue.config.productionTip = false;

/* v1.1.2 */
Vue.component(Button.name, Button);
Vue.component(Button.Group.name, Button.Group);

/* v1.1.3+ 自动注册Button下组件，如Button.Group */
Vue.use(Button);

Vue.prototype.$message = message;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});