Ant-design-vue is introduced as needed

The technology used is vue3 framework ant-design-vue 2x.antdv.com/docs/vue/in…

Installed component libraries

The quick start of the official website and the command of ant-design-Vue installation are not the same, so the error must be switched to the 2.x version in the upper right corner

npm i --save ant-design-vue@next
Copy the code

Install Usage in babel.config.js as shown in the example on the official website

npm install babel-plugin-import --save-dev
Copy the code

configuration

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'].plugins: [["import", { "libraryName": "ant-design-vue"."libraryDirectory": "es"."style": "css" }] // 'style: true' will load less files]}Copy the code

The introduction of

Do not import CSS in global files

main.ts

import { createApp } from 'vue'
import App from './App.vue'

import { Button, message } from 'ant-design-vue';
const app = createApp(App);
app.use(Button);
app.config.globalProperties.$message = message;


app.mount('#app')


Copy the code