使用AntDesignVue在组件中按需加载和踩过的坑

1,088 阅读2分钟

今天刚上手使用AntDesignVue,按需加载属实是有点头疼,特别这个是使用form表单的时候一直不让我用a-form-item。搜了半天也没有一个所以然,然后自己试了半天终于才解决了QAQ

配置

首先用构建工具(vue/cli或vite)初始化一下(不多赘述了)
然后安装ui库和按需加载要用的插件(插件可以安装到dev环境)
npm install ant-design-vue babel-plugin-import --save

main.js中不用管,在babel.config.js(需要安装babel)添加配置

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

详细配置可以去官网看看

在"style": "css" 中文档是写的 "style": true ,但这样用的是less文件所以需要安装less相关的loader,使用css就不不会有这样的问题了

使用

用用button看有没有生效

<template>
  <div>
    <a-button type="primary">Primary</a-button>
   </div>
</template>

<script setup>
import { Button as aButton } from "ant-design-vue"
</script>

给导入的组件起一个别名加个a就可以和官方文档中一致了(这点好麻烦啊喂)
好耶成功生效了(假装这里有一张效果图)


写一个简单的登录表单试试(css就不放了)

<template>
    <div class="acount">
        <div class="wrap">
            <h1 class="title">Login</h1>
            <a-form layout="vertical">
                <a-form-item label="用户名">
                    <a-input placeholder="Username"></a-input>
                </a-form-item>
                <a-form-item label="密码">
                    <a-input type="password" placeholder="Password"></a-input>
                </a-form-item>
                <a-form-item>
                    <a-checkbox>Remember me</a-checkbox>
                </a-form-item>
                <a-button type="primary" html-type="submit">登录</a-button>
                <a href>账号相关</a>
            </a-form>
        </div>
    </div>
</template>

<script setup>
import { Form as aForm, Checkbox as aCheckbox, Button as aButton, Input as aInput } from "ant-design-vue"
</script>

然后就会发现a-form-item并没有起作用,并提示你没有这个用户定义组件
难道需要额外导入?于是在import中加入form-item试试

import {FormItem as aFormItem}

完了,这下直接报错了(大概是说没有找到FormItem这玩意)
然后去官方的文档下看看组件列表,发现没有AFormItem这个组件,想着也是应该绑定在Form中

但是应该如何把这个组件弄出来呢
然后我打印了一下Form,发现其中确实有AFormItem这个组件,接着试试看aForm下有啥东西
果然,发现了aForm.Item这个难道就是AFormItem吗

const aFormItem = aForm.Item

好耶,成功了,a-form-item加载出来了

最后

其实更简单的是直接在main.js中一直叠use,但是这样总感觉use叠太多一起了不太好看...而且之前是用另外一个组件库也是在各个文件中各自的按需使用所以也想试试看,或许路由懒加载可以更快的加载开始的页面,但是好像这样使用更麻烦了欸...
import { Button } from 'ant-design-vue';createApp(App).use(Button).use(其他组件).mount('#app')