H5引入vant报错和样式失效

最新推荐文章于 2024-08-17 00:55:29 发布

方磊Nine

最新推荐文章于 2024-08-17 00:55:29 发布

阅读量4.3k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/nine_91/article/details/124769697

版权

本文探讨了vant库在Vue项目中引入时的错误，着重于解决UncaughtTypeError，以及如何调整引入顺序确保正常工作。同时，揭示了vant组件样式失效的常见陷阱，如正确包裹元素的重要性。通过实例和在线资源，提供了解决方案和前端开发者的实用建议。

摘要由CSDN通过智能技术生成

1.vant引入报错（Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')）

原因：vant引入顺序在vue引入前

修改顺序后可正常使用

2.vant组件样式失效

首先检查是否引入了vant样式，确认路径

引入样式后 vant标签写在body里但没有<div>包裹样式会失效（避坑点）

如图样式失效

放到<div>里面样式恢复

在线引入下载vue和vant

<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>

<script src="https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js"></script>

在线样式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@next/lib/index.css"/>

也打开链接

vue

https://cdn.jsdelivr.net/npm/vue@next

vant

https://cdn.jsdelivr.net/npm/vant@next/lib/vant.min.js

vant样式

https://cdn.jsdelivr.net/npm/vant@next/lib/index.css

然后Ctrl+s 保存本地

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

方磊Nine

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践

xxxzzzqqq_的博客

03-15

2254

预览图片旋转就讲完了。不过，扩展名里加 .vue 的话会报错，一般来说 .vue 文件编译之后会是 js，但是 .vue 里面如果包含了样式，会单独提取出来作为一个虚拟的文件，通过查询参数 type=style 来读取，这里以 babel 来转译样式文件当然报错。别急，你以为就这样完事了吗，并没有。与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

小程序跳转H5实现长截图功能；vue-cli3通过rem适配

guairena的博客

08-05

2507

Error:Loading PostCSS Plugin failed: Cannot find module ‘postcss-pxtorem‘报错解决

参与评论您还未登录，请先登录后发表或查看评论

Vant组件样式没有生效

Ljm_的博客

12-28

6379

昨天在学习Vant组件库的时候遇到一个问题；我在main.js中引入了vant，也注册到了Vue中；因为我使用的是自动按需导入, 那么就要配置babel.config.js, 如图; 但是在运行的时候vant的样式却没有生效, 相当于写了HTML+CSS, 但是CSS却没生效；在网上查阅了相关资料，有人说要在main.js写上import 'vant/lib/index.css', 但是我写上之后还是没有生效，于是在vant的文档里看了下，这是另一种导入的方法，而且也确实没有生效，那么与...

Uncaught TypeError: Cannot read properties of undefined (reading ‘prototype‘)

weixin_45966674的博客

06-24

4544

Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')

Cannot read properties of undefined (reading ‘prototype‘) TypeError: Cannot

最新发布

weixin_73060959的博客

08-17

147

原因：Vue3版本引入的element-ui。解决：使用ElementPlus。

vue项目引入vant后不生效问题的解决办法

sharleen84的博客

08-13

5706

之前创建项目时，直接使用vue add vant的方式引入，很方便，一键完成安装、引入、配置及使用。但是存在一个问题，就是版本较低，vue官方好像很久没有更新这个vant了。所以决定手动安装引入配置。其次是引入 vant.js import 然后 Vue.use 在main.js中引入。其实也可以用vue add vant的方式一键部署后，再通过更换版本来完成版本更新的。以为这样就完了，结果就是样式不生效。原因就是缺少样式文件的引入。安装后，再启动，就成功了！会自动更换相关的连接。...

关于使用vue过程中警告的问题Cannot read properties of undefined (reading ‘prototype‘)

qq_60619678的博客

06-13

854

原因是我项目中安装了element-ui相关的依赖以及插件，导致报警告。后续解决办法：将插件以及依赖删除，使用element-plus。

一些CND链接地址

qq_37932625的博客

09-25

778

vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇

drhrht的博客

07-31

6376

但是会出现卡顿现象。当微信支付弹窗弹出，就要持续发获取订单支付状态的请求（持续是因为并不知道用户什么时候支付，所以需要持续发请求，直到能获取到支付状态），若接收到支付成功，则路由跳转至支付成功页面。项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。例如，为防止，不经过某路由就直接在地址栏输入本路由地址而跳转至本路由，导致本路由获取不到前面路由的某些数据，所以给本路由加路由独享守卫。...

Vue核心技术与实战--2023.7.4

weixin_65590235的博客

07-04

663

Vue+面经

m0_55613022的博客

02-24

3192

HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f

vant.min.js/css

06-12

把vant的css和js文件导入html项目，可以在html页面引用vant组件，避免使用连接访问的难以维护的麻烦。

在Vue中引入vant报错（解决办法）

fzxyxf1314的博客

07-19

9779

第一种方案：一、安装vant

Vant4函数组件样式丢失问题

Xya_a的博客

09-15

450

今天在写项目的时候使用到了showToast组件发现样式丢失了网上冲浪时才发现要导入。例如：import 'vant/es/toast/style';感觉奇奇怪怪的为什么导入。

解决vant组件样式无法显示的问题

weixin_43750611的博客

09-26

6394

vant组件样式无法显示的问题问题：在写vue时使用vant组件时，vant 组件样式无法显示出来原因：因为.vue文件中的style标签内有scoped，表明样式只对本个.vue文件中的template模板标签内的结构有效，引入的第三方vant中的组件是无效的解决方法： 1、定义一个全局的样式文件，例如在src目录中添加一个resetvant.css文件，专门用来存放vant组件中需要修改的样式(便于维护最好使用组件原有的样式类名进行样式修改)。最后在main.js文件中全局引入就可以了。 im

使用uni-app + vant-weapp 发布到H5以及小程序遇到的问题

HWJBJ的博客

01-21

2938

使用uni-app + vant-weapp 发布到H5以及小程序遇到问题记录欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码

vue 通用样式被导入多次 vant 样式丢失不正常

积极的小可爱~的博客

03-18

2172

问题 1：在看控制台的时候发现通用样式重复导入了 2：vant的样式有问题，好像vant的padding都没了发生原因我配置了通用样式，会自动导入一遍，然后我在app.vue中又导入了一遍，这样已经有重复导入了两遍了，然后配置的@base-color这些数据跟reset.less放在一起，这样导致重复引入第三遍。综上就是为啥看控制台会有那么多次重复引入样式的原因。而vant的样式丢失，看控制台一个个注释样式发现是因为reset.less中的padding:0导致的，注释掉就好了，但是当时一直不

cli 创建的uniapp项目引入vant 样式报错解决方案

qq_42294411的博客

11-03

1129

cli 创建的uniapp项目引入vant样式报错解决方案

Vue2项目打包时，引入element-ui 配置 CDN 加速时报错 Cannot read properties of undefined (reading ‘prototype‘)

LHH1655758452的博客

03-18

3470

Vue2项目打包优化时，引入element-ui 配置 CDN 加速时报错出现报错信息：Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')此时再重新打包，控制台就没有报错了，试了下，项目也能正常运行。在 externals 下把 vue 也一起配了。老师说出现这个问题的原因是，

vue3引入vant报错

05-12

要使用 Vant 3.x 版本，需要使用 Vue 3.x 以及对应的 Vue CLI 版本。如果你已经使用了 Vue 3.x 和 Vue CLI 4.x，那么可以按照以下步骤来解决问题： 1. 安装 Vant 3.x： ```bash npm install vant@next -S ``` 2. 在 `main.js` 中引入 Vant： ```javascript import { createApp } from 'vue'; import Vant from 'vant'; import 'vant/lib/index.css'; import App from './App.vue'; const app = createApp(App); app.use(Vant); app.mount('#app'); ``` 3. 在 `babel.config.js` 中添加 Vant 的按需引入配置： ```javascript module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant' ] ] } ``` 如果你使用的是 Vue CLI 3.x，那么需要先升级到 Vue CLI 4.x，然后再按照上述步骤进行操作。如果你还是遇到问题，可以提供更具体的错误信息以便我更好地帮助你解决问题。