Vue3中使用vant的踩坑实战日记

目录
  • 前言
  • 一、下载vant
  • 二、下载插件
  • 三、配置插件
  • 四、简单使用
  • 五、我的解决方法
  • 总结

前言

我照着视频中老师教的方式去使用vant(和官网教程一样)，发现样式根本不起作用（想截个图来着，但是vite热更新太厉害了，找不到了哈哈哈），然后又反复看了视频一遍，检查自己插件啥的而又没有安装好，发现和老师的一样。。。。，头疼…害。。。，幸好我最后在想用不用在main.js引入vant（因为老师说插件会自动识别，所以一开始一直以为是自己配置或者代码写错了的问题QAQ），最后成功了嘿嘿嘿（但是这样的话自动按需引用的插件不就没有用了吗。。。，所以又换了别的方法）

当然这里先写怎样在Vue3中使用vant，最后再附上我的解决方法（ps：我估计不是每个人都有这样的问题，虽然我也不知道我为啥会有emm…伤心。。。。）

一、下载vant

vant官网：vant

这个里面有很详细的步骤，我这里只写我用的，别的方法当然也是可以的

最好看官网，因为官网基本不会出错的。。

下载vant

通过 npm 安装

Vue 3 项目，安装最新版 Vant
npm i vant
 
Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

二、下载插件

通过 npm 安装

npm i vite-plugin-style-import@1.4.1 -D

三、配置插件

配置插件

安装完成后，在 vite.config.js 文件中配置插件：

import vue from '@vitejs/plugin-vue';
import styleImport, { VantResolve } from 'vite-plugin-style-import';

export default {
  plugins: [
    vue(),
    styleImport({
      resolves: [VantResolve()],
    }),
  ],
};

在自己对应的vite.config.js 进行配置

然后npm run dev 重新启动服务（当然vite热更新很快的，大多数都不用重启服务）

四、简单使用

放在template里面

	<van-button type="primary">主要按钮</van-button>
      <van-button type="success">成功按钮</van-button>
      <van-button type="default">默认按钮</van-button>
      <van-button type="warning">警告按钮</van-button>
      <van-button type="danger">危险按钮</van-button>

效果

（但是我的没显示QAQ，最后才显示的）

五、我的解决方法

方法一：

这个是全局使用，这个是没有任何问题的，但是不推荐

官网也有说，Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐种做法。

方法二：手动按需引用，

我的不可以，我也不知道为什么。。。，会报这个错误，

翻看了网上的资料，有人说是目录层级错误，

在resolvers这个位置添加下面代码；

   libs: [
        {
          libraryName: "vant",
          esModule: true,
          resolveStyle: (name) => `../es/${name}/style`,
        },
      ],

emm…我试了，但是没有起作用，但是我觉得跟这个有关系的（报错信息也是显示的路径）

方法三：

删除node_modules,再npm install安装依赖

这个是可行的，但是可能是vscode的原因，或者我在别的文件也开了node_modules（具体原因我还不知道），反正VSode就是打不开那个文件了，命令行路径是那个文件，就是打不开。。。。，重启电脑也没有用，但是我还是想知道删除node_modules是否可行，所以我就在命令行npm install，在重启下服务npm run dev，发现样式啥的都可以显示出来了，所以我认为这个方法是可行的，可能是是vscode的原因，或者我在别的文件也开了node_modules，总而言之。。。。痛苦面具

方法四：

有个热心网友说会不会是我现在的插件版本不对，我看了看官网，又看了看他发的那个插件，发现是不一样的，我是看官网的教程，但是我觉得应该不是这个问题，因为可能这个东西更新的快，官网给的是最新的，按理说作用都是一样的（自动按需引入），本来想试试他发的那个版本的，但是我的那个文件在删除node_modules无法打开了…emm…

他发的那个版本：

目前官网上的：

总而言之，bug虐我千百遍，我待bug如初恋…

总结

到此这篇关于Vue3中使用vant的文章就介绍到这了,更多相关Vue3使用vant内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue3+vant+ts 上滑加载解决上滑调用多次数据的问题(推荐)

    之前用vue2的时候,写过vue2的用法,文末扩展知识点击查看,用得挺好的,也没啥问题,照葫芦画瓢的做出来了,但是有问题,下滑之后调用多次数据,按理说 组件通过 loading 和 finished 这俩变量控制加载状态,当组件滚动到底部时,会触发 load 事件并将 loading 设置成 true.此时可以发起异步操作并更新数据,数据更新完毕后,将 loading 设置成 false 即可.若数据已全部加载完毕,则直接将 finished 设置成 true 即可. 但是我打印了一下,在调用方

  • vue3如何使用vant-picker封装省市二级联动

    目录 首先,项目中引入vant-ui 子组件代码PickerArea 父组件代码 怕什么真理无穷,进一步有进一步的欢喜呀,不得不承认的就是,兴趣和擅长是一个良性迭代的循环啊,你擅长某件事情,就会越喜欢它,越喜欢,就越愿意花时间,进而越擅长.所以代码码起来吧哈哈哈 近期用上了vue3,还顺手写了个小需求,用vant-picker封装一个省市的二级联动,并且在从后端接口获取省市的数据,点开弹出框需要展示默认的选项,比如点击广东省-深圳市输入框,弹出的picker级联选择器需要默认广东 -深圳. 如下

  • 使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    使用Vite+Vue3+Vant全家桶快速构建项目步骤详解

    目录 引言 一.vue3全家桶模板介绍 1.版本依赖 2.全家桶内置集成 二.安装 tive-cli 命令行工具 三.生成项目 四.项目体验 引言 随着Vue3 和 Vite 版本的不断更新完善,开发体验有了质的飞跃.因此,越来越多的大厂也逐步拥抱 Vue3. 利用Vite 脚手架工具可以很轻松生成以 Vue3 为模板的项目,但是作为Vue全家桶的 vue-router.vuex.axios等成员,需要自己一个一个去配置.于是便自行开发了本文讲到的 tive-cli 脚手架模板工具,只需短短几个

  • vue3+ts+vant移动端H5项目搭建的实现步骤

    vue3+ts+vant移动端H5项目搭建的实现步骤

    目录 1.全局安装vue-cli 2.使用vue ui 可视化创建项目 3.打开项目 4.安装vant,并实现按需引入 5.移动端适配(rem) 使用vue-cli搭建项目 1.全局安装vue-cli npm install -g @vue/cli 安装完成验证 vue -V 2.使用vue ui 可视化创建项目 2.1 vue ui vue ui 2.2 点击创建 点击创建 在learn目录下创建项目 填写创建的项目名,选择包管理器npm 2.3 点击下一步 选择手动,点击下一步 2.4 选择

  • Vue3中使用vant的踩坑实战日记

    目录 前言 一.下载vant 二.下载插件 三.配置插件 四.简单使用 五.我的解决方法 总结 前言 我照着视频中老师教的方式去使用vant(和官网教程一样),发现样式根本不起作用(想截个图来着,但是vite热更新太厉害了,找不到了哈哈哈),然后又反复看了视频一遍,检查自己插件啥的而又没有安装好,发现和老师的一样....,头疼…害...,幸好我最后在想用不用在main.js引入vant(因为老师说插件会自动识别,所以一开始一直以为是自己配置或者代码写错了的问题QAQ),最后成功了嘿嘿嘿(但是这样

  • 一场由Java中Integer引发的踩坑实战

    看过阿里巴巴开发手册的同学应该都会对Integer临界值127有点印象. 原文中写的是: [强制]所有整型包装类对象之间值的比较,全部使用 equals 方法比较. 说明:对于 Integer var = ? 在-128 至 127 之间的赋值,Integer 对象是在 IntegerCache.cache 产生, 会复用已有对象,这个区间内的 Integer 值可以直接使用==进行判断,但是这个区间之外的所有数据,都 会在堆上产生,并不会复用已有对象,这是一个大坑,推荐使用 equals 方法

  • 使用Pyinstaller的最新踩坑实战记录

    前言 将py编译成可执行文件需要使用PyInstaller,之前给大家介绍了关于利用PyInstaller将python程序.py转为.exe的方法,在开始本文之前推荐大家可以先看下这篇文章,本文主要给大家介绍了Pyinstaller最新踩坑实战记录,现在网上关于pyinstaller的问题充斥着各种copy过来copy过去的答案,这大概就是各种无脑博客爬虫站最让人讨厌的地方. 而且这方面的问题,stackoverflow也是回答的千奇百怪. 强烈推荐官方文档 http://pythonhost

  • C++踩坑实战之构造和析构函数

    目录 前言 构造函数 通过构造函数实现的类型转换 派生类的构造函数 析构函数 继承中的析构函数 应用 总结 前言 我是练习时长一年的 C++ 个人练习生,喜欢野指针.模板报错和未定义行为(undefined behavior).之前在写设计模式的『工厂模式』时,一脚踩到了构造.继承和 new 组合起来的坑,现在也有时间来整理一下了. 构造函数 众所周知:在创建对象时,防止有些成员没有被初始化导致不必要的错误,在创建对象的时候自动调用构造函数(无声明类型),完成成员的初始化.即: Class c

  • Swift踩坑实战之一个字符引发的Crash

    最近因为一个字符引发了 Crash,因为实际的业务场景不便描述,这里便用一段测试代码作说明. 话不多说,直接上代码: let testCharacters: Set<Character> = ["!", "\"", "$", "%", "&", "'", "+", ",", "<", &quo

  • Python 3.x踩坑实战汇总

    目录 纪要 处处有坑 1. 文件读取 open 2. 正则表达式 \S 与 \\S 3. 正则表达式匹配方法 match 4. 帮助文档 pydoc 5. 字符串 encode base64 编码 6. Python 调用 C# 动态链接库 总结 纪要 本文用于记录学习 Python 过程中遇到的一些小问题,如果遇到的是比较大的问题会单独开页面分析学习 处处有坑 1. 文件读取 open # 我们打开文件使用 open 方法 xml = open("demo.xml") # 使用 op

  • Go使用proto3的踩坑实战记录

    开发环境:windows10,golang1.18.2,goland2022.2 最近在写项目时,一些数据类的结构以protobuf文件给定.因此,需要将这些protobuf文件转换为golang代码. 首先,在下载解析protobuf的包的时候就碰到了第一个问题... go get -u github.com/golang/protobuf/protoc-gen-go 在我用上述命令后,终端提示该包已弃用 go: module github.com/golang/protobuf is dep

  • Ruoyi从mysql切换到postgresql的几个踩坑实战

    目录 前言 一.在pom.xml文件中将mysql的依赖jar包替换成postgresql的. 二.mybatis-plus或者分页插件数据库类别支持 三.数据库连接池要做相应调整 四.自动任务依赖,如果您开启了quartz组件,请记得打开以下注释 五.在所有的Mapper.xml配置文件中,找到有sysdate()的函数,需要替换成now()函数. 六.所有带日期查询函数需要替换成如下的代码: 七.mysql find_in_set()函数可以使用ANY()方案. 总结: 前言 因为工程应用需

  • python3.6中anaconda安装sklearn踩坑实录

    首先我是用pycharm完成的,要确定命令行和界面里是同一个环境. 如果不确定可以设置再add在新增加的环境里看现在是哪个环境,只要选择已有的环境,虽然project interpreter里面好像新增了个(2),但是包可以直接移植过来. 然后可以检查一下自己现在的Python版本和conda版本和解释器里的一样不. conda是在终端输入,conda info -e,第一个星号就是自己的版本. Python是在Python终端里面输入,import sys和sys.executable查看当前

  • python中remove函数的踩坑记录

    摘要: 在python的使用过程中,难免会遇到要移除列表中对象的要求.这时可以使用remove函数. 对于python中的remove()函数,官方文档的解释是:Remove first occurrence of value.大意也就是移除列表中等于指定值的第一个匹配的元素. 语法 list.remove() 参数 obj 参数:从列表中删除的对象的索引 返回值 删除后不会返回值 常见用法: a = [1,2,3,4],a.remove(1),然后a就是[2,3,4]:对于a = [1,1,1

随机推荐