笔记记录-Antdesign for VUE (全局注册or按需加载）

vue引用Antdesign，全局注册以及按需加载；项目环境vue3.x

一、执行安装命令

npm install ant-design-vue --save
or
yarn add ant-design-vue

二、按需加载

1.安装依赖：babel-plugin-import

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

2.配置相关文件.babelrc 或 babel.config

"plugins": [
// `style: true` 会加载 less 文件 可以更改为"css" 但是样式可能加载不全
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true }] 
  ]

如果样式未起效，则在main.js中引入样式：

import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'

3.在需要的文件中引入相关组件

例如：

import { DatePicker } from 'ant-design-vue';

---

三、全局引入

1.在main.js文件中加入以下代码行

import Antd from 'ant-design-vue'; //引入组件库
import 'ant-design-vue/dist/antd.css'; // 引入相关样式

//注册
app.use(Antd);

注册成功后，可在任意vue文件中使用有关组件；例如

<a-button type="text">Text Button</a-button>