ant 使用安装 按需加载
创好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 (这只是大概都是这样) 杠可以去掉 杠后面的大写
白图是完整引入 下面 的Button代码才是按需加载
<script lang="ts" setup> import { Button } from "ant-design-vue";</script>
<Button type="primary">是否是蓝色</Button>
