ant design vue使用安装 按需加载

卸载

npm uninstall ant-design-vue

创好vue 项目 先从完整引入开始 而后修改

npm 下载ant

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

完整引入

main文件下添加

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
.use(Antd)

这样就ok了

使用的时候就是正常复制文档代码使用

按需引用:

# 安装 babel-plugin-import 插件

要先把完整引入给去掉 (main文件里面的要删掉)

终端输入: 这是下载插件
npm i babel-plugin-import -D

在bable.config.js 里面添加红色这块

"plugins": [
    ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] 
    // `style: true` 会加载 less 文件
  ]

如图:

使用:

使用方式一  下面这一张是直接把此文件当做组件跑出去了 

 使用方式二 : setup 语法糖直接使用

引入时:

如果使用a-button  就直接import { Button } from "ant-design-vue" 如此引用

遇到后面有带嵌套的 比如 menu  (这只是大概都是这样)

杠可以去掉 杠后面的大写

实际上遇到后面有带单词 的 需要ctrl + 左键  点进去 查看expost 出来了 什么(不细讲,我也还不明白,明白的可以私信我 谢谢!)

白图是完整引入 下面 的Button代码才是按需加载

<script lang="ts" setup> import { Button } from "ant-design-vue";</script>

<Button type="primary">是否是蓝色</Button>

完整引入 4.x 版本 

$ npm install ant-design-vue@4.x --save

$ yarn add ant-design-vue@4.x

import Antd from 'ant-design-vue';

import 'ant-design-vue/dist/reset.css';

.use(Antd)

遇到的问题：

问题1  antd is not defined

ps：去掉babel.config.js文件中的所有配置。然后配置main.js 就可以了