Bug 解决 | 组件库报错、或样式丢失不生效

目录

一、前言

二、版本问题

1、使用 VantUI 的 toast 组件报错？

2、引入 VantUI 组件库后，toast 组件样式丢失了？

3、使用 Ant Design Vue 组件库，启动后显示 antd.css 不存在？

4、Vant UI 组件库引入的 tabs 组件报错

5、Vant UI 组件的 Dialog.componemets 失效

二、代码问题

三、其他问题

---

一、前言

我相信很多同学在做项目的时候都会遇到组件库相关的问题， 明明用了这个样式怎么不生效？为什么还报错了？

其实很多时候不是咱们用的不对，是我们使用的组件库更新了！老的代码和新的版本不兼容，导致的各种问题。

所以如果我们觉得代码写的没毛病，那么首先就去确认下版本。

强烈建议使用各种组件的时候，需要对着官方文档来哦！

下面分享一些组件库报错或样式丢失的案例，供大家参考。

二、版本问题

1、使用 VantUI 的 toast 组件报错？

新版本的 VantUI 语法改变了，成功需要用 showSuccessToast() ，失败用 showFailToast() 。

2、引入 VantUI 组件库后，toast 组件样式丢失了？

因为版本不一致，假如你在视频教程中用的是 Vant3，而最新的 Vant4 版本需要这样设置：

1）先修改 main.ts 文件

把
import'./style.css'

改为：
import'vant/lib/index.css'

2）修改 vite.config.ts 文件

把
// https://vitejs. dev/config/
export default defineConfig({
  plugins: [vue(),
  Components({
    resolvers: [VantResolver()],
  }),
  ],
})

改为
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    Components({
    resolvers: [VantResolver({
      importStyle: false,
    }
    )],
  }),
  ],
})

同理，如果要使用 vant 4 的 data-p