vue3+vite引入vant样式不起作用

搜了很多资料没有搜到一篇能解决问题的文章，基本上都是说什么vite引入的问题，其实并不是，官网给的按需引入的代码没有什么问题

这是vite的配置

import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';

export default {
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => `vant/es/${name}/style/index`,
        },
      ],
    }),
  ],
};

于是乎还得靠自己把vant这个对象打出来看看有什么猫腻

得到的结果是这样的
那么我的问题就出在组件引入的问题上
由于我是在script中加了setup
所以按我引入的习惯
比如引入库里面的组件，我会按下面的方式引入
import {Form, Field, CellGroup, Button,Dialog} from 'vant'
但是从我们打印出来的组件对象来看这么引入是错的
正确的引入方式是

<script lang="ts">
import {Form, Field, CellGroup, Button,Dialog} from 'vant';
import {defineComponent, ref} from "vue";
export default defineComponent({
  components: {
    [Form.name]: Form,      //这里必须这么写不然就报错样式也不会有.这就是坑
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Dialog.Component.name]: Dialog.Component
  },
  setup() {
    const username = ref('');
    const password = ref('');
    const onSubmit = (values:string) => {
      console.log('submit', values);
    };
    return {username, password, onSubmit,};
  },
})
</script>

vant文档对刚使用它的人十分不友好，可以说引入组件那部分文档就是错的，要靠用户自己取猜，怎么引