按需引入ant-design-vue

所使用的技术是vue3
框架ant-design-vue 2x.antdv.com/docs/vue/in…

安装的组件库

官网的快速上手和ant-design-vue 安装的命令不一样 导致报错 一定要切换到右上角的2.x版本

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

按照官网的例子在babel.config.js配置 安装 Usage

npm install babel-plugin-import --save-dev

配置

babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
  ]
}

引入

在全局文件中引入 不用引入css噢

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')