卸载
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 就可以了