1.遇到问题
使用单页面vue,vant发现报错
Cannot read properties of undefined (reading ‘click’)
Uncaught TypeError: Cannot read properties of undefined (reading ‘touchstart’)
Cannot read properties of undefined (reading ‘prototype’)
2.解决过程
下载最新版本vue2发现不再报错,使用2014-2017版本的vue2则会报错。
3.如何解决
将 * Vue.js v2.2.2 * © 2014-2017 Evan You 版本的vue.min.js文件换成 * Vue.js v2.6.12* © 2014-2020 Evan You.即可。
4.简单使用单页面vue,vant实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link rel="stylesheet" href="./css/vantCss.css">
<script src="./js/vue.min.js"></script>
<script src="./js/vant.min.js"></script> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" rel="external nofollow" target="_blank" />
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js" rel="external nofollow"></script>
</head>
<body>
<div id="app"></div>
<script>
var app = new Vue({
el: '#app',
data: {
},
methods: {
},
created() {
vant.Dialog.alert({
message: '弹窗内容'
}).then(() => {
// on close
});
},
})
</script>
</body>
</html>
5. Cannot read properties of undefined (reading ‘prototype’)
vue版本问题
单页面使用vue,element
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world">
<p>Try Element</p>
</el-dialog>
<i class="el-icon-edit"></i>
<i class="el-icon-share"></i>
<i class="el-icon-delete"></i>
<el-button type="primary" icon="el-icon-search">搜索</el-button>
</div>
</body>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return { visible: false }
}
})
</script>
</html>