VUE3中引用ANTCD UI组件教程

1，在项目中安装使用组件

npm i --save ant-design-vue@next

2.1完整引入main.js配置

import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import App from './App.vue'
import 'ant-design-vue/dist/antd.css'
const app = createApp(App)
app.config.productionTip = false
app.use(Antd);

app.mount('#app')

以上代码便完成了 Antd 的引入。需要注意的是，样式文件需要单独引入

icon图标需要单独引入，npm执行如下安装指令

npm install --save @ant-design/icons-vue

在main.js中引入图标

import {
  createApp
} from 'vue'
import Antd from 'ant-design-vue'
import App from './App.vue'
import 'ant-design-vue/dist/antd.less'
import router from './router'
import store from './store'

//  引入
import * as Icons from "@ant-design/icons-vue";

const icons = Icons;
const app = createApp(App)
app.config.productionTip = false
app.use(Antd)

// 应用所有icon组件
for (const i in icons) {
  app.component(i, icons[i]);
}
// 定义全局组件
app.config.globalProperties.$antIcons = Icons

app.use(store).use(router).mount('#app')