H5引入vant报错和样式失效

1.vant引入报错（Uncaught TypeError: Cannot read properties of undefined (reading 'prototype')）原因：vant引入顺序在vue引入前修改顺序后可正常使用2.vant组件样式失效首先检查是否引入了vant样式，确认路径引入样式后 vant标签写在body里但没有<div>包裹样式会失效（避坑点）如图样式失效

方磊Nine

4412人浏览 · 2022-05-14 16:37:03

方磊Nine · 2022-05-14 16:37:03 发布

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 保存本地

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^