vue3、vite整合vant后，使用navbar发现dom位置错乱解决方案

问题如题目所示，先简单描述下我的整合流程

1.首先使用

yarn create vite

创建vue3项目，在创建项目的引导中选择vue和typescript

2.安装依赖

yarn install

3.按照官网命令整合vant4

yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

4.按照官网配置vite.config.ts

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

5.按照官网来使用NavBar，结果发现dom元素的位置完全错乱了，此处省略口吐芬芳10000字。

最开始怀疑依赖冲突，毕竟统一用的都是最新版本技术框架，我觉得多少有点草率。但是，控制台貌似又没报什么错，作为一个后端开发，在迫不得已情况之下开发前端的东西可能经验上还是有很多欠缺，换了有经验的前端同学或许会很快想到css的锅。

我当时属于一根筋认准了就是依赖冲突的问题，后来偶然之间发现：

在main.ts中删掉如下部分

import './style.css'

然后navbar就不会出现dom错乱的问题了

那么情况就很明朗了，vite帮助我构建的项目中，热心地帮助我写了一套美丽的样式，但是，这致命的美丽导致vant4直接发神经了。

目前来说，问题就解决了，不过这样解决的话，后续在项目的开发中会不会引发其他问题还尚未可知（感觉应该大概也许不会了吧），按照我这套方式解决问题的小伙伴们，如果后续出了什么问题就自求多福吧。