使用vant步骤

首先vant可以兼容uniapp直接vant版就好。微信小程序专用版本是:vantweapp

基本使用步骤

1、安装

# 安装 Vant-如果你用的是vue3
$ npm install vant

# 如果你用的是vue2
$ npm i vant@latest-v2 -S

# 在 main.js引入 Vant,请注意版本区别
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

2、使用

组件中使用,比如pages/index/index.vue中:

<template&gt;
  <div&gt;
    <van-button type="primary" @click="handleClick">点击按钮</van-button>
    <van-dialog v-model="showDialog" title="提示" message="Hello, Vant!"></van-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    };
  },
  methods: {
    handleClick() {
      this.showDialog = true;
    }
  }
};
</script>

使用中遇到问题

1、安装Vant Version 2.13.2后,导入样式报错

Module build failed (from ./node_modules/postcss-loader/src/index.js):

image-20231204173011243

解决方法修改 ~node_modulesvantlibindex.css 文件,将该文件中的 “url改为url” ,一共需修改2处。你没看错,加个空格就好了。

2、运行微信小程序后,报错

VM74:9 app.js错误:
 TypeError: Cannot read property 'userAgent' of undefined

定位问题发现是JS的navigator对象不支持

image-20231204173546712

原因是微信小程序支持documentwindow对象,所以navigator自然是无法使用的。

浏览器中的运行效果

image-20231204173239823

综上,不建议uniapp项目使用vant。

参考文章https://github.com/youzan/vant/issues/12421

其他问题,请参考https://github.com/youzan/vant/issues?q=uniapp

如果你在web前端开发面试前端学习路线有困难可以加我V:imqdcnn免费答疑,行业深潜多年的技术牛人帮你解决bug

祝你能成为一名优秀的WEB前端开发工程师

原文地址:https://blog.csdn.net/imqdcn/article/details/134790046

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_41554.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注