H5引入vant报错和样式失效

最新推荐文章于 2024-09-28 16:24:16 发布

方磊Nine

最新推荐文章于 2024-09-28 16:24:16 发布

阅读量4.4k

点赞数 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

2378

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

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

guairena的博客

08-05

2553

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

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

Vant组件样式没有生效

Ljm_的博客

12-28

6415

昨天在学习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

4587

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

react报错Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘trim‘) at

最新发布

肥晨开发的学习之路

09-28

855

这个错误表明你尝试在一个未定义的变量上调用trim方法。trim是一个字符串方法，用于移除字符串两端的空白字符。由于JavaScript中的undefined类型没有定义任何方法，因此当你尝试在未定义的变量上调用trim时，会抛出这个错误。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。在调用trim之前，检查变量是否为undefined或null。确认变量是否已经正确定义并赋值为字符串。

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

sharleen84的博客

08-13

5811

之前创建项目时，直接使用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

915

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

一些CND链接地址

qq_37932625的博客

09-25

795

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

drhrht的博客

07-31

6554

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

Vue核心技术与实战--2023.7.4

weixin_65590235的博客

07-04

699

Vue+面经

m0_55613022的博客

02-24

3247

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

9909

第一种方案：一、安装vant

Vant4函数组件样式丢失问题

Xya_a的博客

09-15

499

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

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

weixin_43750611的博客

09-26

6485

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

3010

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

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

积极的小可爱~的博客

03-18

2199

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

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

qq_42294411的博客

11-03

1163

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

Vue cannot read property XXX of undefined 解决方法

csdn_muxin的博客

12-06

6508

原因这个错误的意思就是所需要的这个属性为空 / 不存在，基本上都不是属性值为空，而是这个属性不存在那么就需要找到引用属性的位置，看看在使用属性之前是否还未定义该属性解决方法在引用该属性前做一个判断，如果该属性不存在就添加，然后设置一个默认值 // 判断 data 的属性 property 是否为空 if (data.property == null) { // 若为空，添加该属性并初始化为空字符串 data.property = "" } 就像在表格中使用该属性，就可以写一个方法，当表格数据获

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，然后再按照上述步骤进行操作。如果你还是遇到问题，可以提供更具体的错误信息以便我更好地帮助你解决问题。