首先你必须有一个 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/>',
});