Vue2 全局引入vant 踩坑

原创已于 2022-05-10 14:02:19 修改 · 387 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

于 2022-05-10 11:35:48 首次发布

本文指导读者如何避免Uncaught Reference Error：Vant is not defined的问题，重点在于说明全局导入Vant的配置要求，以及如何移除.babelrc或babel.config.js中的相关配置以确保正确使用Vant2版本。

官方文档要选择vant2版本的！！！不然可能写多了。。。

全局导入是不需要配置babel.config.js 的！！！

按需引入才需要配置

全局导入只需要在main.js 引入就可以

出现 Uncaught ReferenceError: Vant is not defined 错误。

解决方法

　　去除在.babelrc文件或babel.config.js文件中的配置

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端小程

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

uniapp使用vue3引入vant踩过的坑

2201_75491624的博客

08-29

2946

整理了在使用hbuilderX创建uniapp时踩过一些莫名其妙的坑,顺便理一下创建项目和导入vant的过程~~踩坑:1.下载vant后没有node_moduled文件2.引入vant后无法使用组件。

vuecli4+vant移动端响应式项目踩坑记录

Beauty_zhang666的博客

05-17

5973

文章目录关键词参考链接一. 使用vue/cli4二. 使用vant三. 加入响应式布局1. rem适配插件2. PostCSS配置四. 图标库：封装svg图标组件1. 建立如下目录结构：2. components/SvgIcon.vue3. icon/index.js4. 配置vue.config.js5. svg图标使用五.axios+api封装目录结构(示例)http.js封装api/index.jsapi/user.jsapi注册到全局(main.js文件)api接口调用示例App.vue（断网代码示

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

解决 vue2 + vant2 打包文件（vendor.js、app.css）过大问题

Peanutfight的博客

03-01

1755

解决 vue2 + vant2 打包文件（vendor.js、app.css等）过大问题。

基于ThinkPHP8 + Vue3 + element-ui-plus + 微信小程序(原生) + Vant2 的 BBS论坛系统设计【PHP课设】

m0_63622279的博客

11-24

9659

我做的是一个论坛类的网页项目，每个用户可以登录注册查看并发布文章，以及对文章的点赞和评论，还有文件上传和个人签名发布和基础信息修改，管理员对网站的数据进行统计，对文章和文件的上传以及评论进行审核，以及对普通的用户的权限提升账号封停等等，以及对应的crud。然后做的是三端（PC端，小程序端）并且采用前后端分离以及JWT技术和RestFull风格API，后端使用ThinkPHP8,PC端使用vue3+element-ui-plus，Axios异步通信以及诸多扩展,微信小程序端使用原生的微信小程序技术+van

vant_vant

qq_43260366的博客

11-16

961

通过部分引入的写法，使得项目代码或 babel 编译后的代码中只包含使用到的组件的 js、css、less 等。原因：我此时使用的vue版本为2.6.14版本，因此如果下载vant3会出现版本冲突。参考vant官网–>快速上手–>通过npm安装/引入组件。问题：在下载 vant 时发现报错。babel插件，该插件的作用是在。(通过此命令安装的是最新版本)(通过此命令安装的是最新版本)解决：下载对应版本的vant;[3]检验是否安装成功。[3]检验是否安装成功。

uniapp引入vantweapp踩坑笔记

A Lucky Boy的博客

01-11

4383

文件中的样式出现了问题，然后就根据提示的路径找到了这个文件，打开后发现都是一些打包过后的样式，刚进去时候一脸蒙，不知道这些样式出现了什么问题，也不敢轻易的修改文件，这时候又到了面向百度的时候了，通过在百度的帮助下，我发现原来是打包过后导致了字体文件路径出错，一共有两种方式可以解决，当我满怀信心的开始创建项目，但刚开始创建项目就遇到了问题，出师不利,问题如下，输入命令时报错（后边发现这个报错不是每次都会出现，因为下载源问题，）本着遇到报错不用慌，打开百度问度娘的原则，最后还是在百度找到了方法，原来是。

Vue3中使用vant（踩坑日记....）

森姐姐的博客

10-12

6601

vue3使用vant组件库

在Vue2项目中使用Vant组件库

SongD1114的博客

06-20

3748

在Vue2项目中使用Vant组件库

vue3+vite+vant4，vant样式的踩坑

insist_life的博客

08-04

1472

开发的时候，在本地调试，使用了Toast一类的轻提示（样式也是在当前页面引入）；但是打包上测试环境的时候，发现是弹出提示了，但是弹框的背景没有了，也就是说，弹框的background变成了白色（默认的）；最近的一个项目用了vue3，然后UI组件库使用的是vant4；但是有部分样式是以函数的方式提供，所以这些组件在使用的时候，需要手动引入。本人以为手动引入的话，那就在我使用这个组件的页面引入不就好了吗，样式也是在这个页面引入即可。但是我的dialog弹框的样式是在页面中引入的，为啥没有出现这个问题呢？

vue3安装vant axios出现的错误踩坑

WangGH00的博客

03-16

422

将plugins/axios.js中59行// Vue.use(Plugin)注释。但是 axios 不知道解决办法暂时没有加入等要用的时候再加入。突然全局注册成功了好像是main.js中调用顺序的原因。不能够很多条createApp 不然会重复调用。axios报错在vue3中。组件无法注册不知道为什么。3.采用局部注册能够成功。在main.js中加入。vant组件无法注册。

vue2.7.14 + vant + vue cli脚手架转vite启动运行问题记录

weixin_44846945的博客

11-13

1579

vue cli 脚手架转成vite启动简单说说这个项目的一些底层基本结构哈，以及写这篇博客的目的。这个项目底层结构是vue2.7.14 + vant ，使用vue cli脚手架搭建的一个H5项目，由于内容比较多，并没有使用vue3重构，但是由于内容过多，渐渐的启动特别耗时，所以计划该用vite去优化启动项。写这篇博客，是记录本人在这个转换过程中遇到的一些问题。在实际的过程中我用了两种方案，第一种利用插件webpack-to-vite。第二种是自己搭建vite。

单页面开发PC端（Vue+Element）和移动端（Vue+Vant的H5）项目踩坑记录

BigFamer的博客

04-28

3288

我遇到的问题我写了一个获取一个div的高度的函数（this.$refs.funBoxs.offsetHeight）并且在尝试mounted生命钩子中调用这个函数并打印高度值，控制台报错（之前用这个是可以获取到高度值的）问题分析控制台报 ...

从0搭建vite-vue3-ts项目框架：配置less+svg+pinia+vant+axios

on1yLX的博客

08-09

1293

postcss-px-to-viewport-8-plugin：postcss-px-to-viewport-8-plugin 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位。创建一个types/index.d.ts，用于处理包括postcss-px-to-viewport-8-plugin一类的没有声明文件的依赖。然后就是test下随便创建一个路由，对应的，views下创建相应的vue文件，App.vue给上router-view。

前端在移动端中的页面切换

2509_93939582的博客

11-28

526

记得加硬件加速，用transform和opacity属性，别动不动改布局属性（比如width或height），那样容易引发重排重绘，卡成幻灯片。不过，SPA也不是万能药，它初次加载可能慢点，得靠代码分割和懒加载来优化——比如把不常用的模块拆开，等用户需要时再加载，这样既省资源又提速。还有，别忘了图片和视频的懒加载：页面切换时，先加载核心内容，图片等可视区域再加载，这样首屏能秒开。另外，内存管理也得注意，SPA容易内存泄漏，切换页面时记得清理事件监听器和定时器，不然用久了手机会变卡。

Electron 与 OpenHarmony 的实战入门：手把手打造一个安全的简易记事本应用

已掌握java全栈，简单的java项目逻辑。目前正在学习鸿蒙开发，有兴趣的小伙伴可以一起学习！！！

11-27

915

这个“简易记事本”虽只有几十行代码，却完整体现了现代桌面应用的安全架构思想。它不仅是 Electron 的最佳入门实践，更是通往 OpenHarmony 全场景开发的桥梁。

js考古之seajs.use、layui.use是啥以及来源？

weixin_52236586的博客

11-29

480

Seajs是先行者，在浏览器原生不支持模块化的黑暗年代，发明了 seajs.use 来实现按需加载。Layui是实用主义者，它借用了这种模块化思想，用 layui.use 把 UI 组件管理得井井有条，成为了 jQuery 时代的绝唱。是终结者，它作为官方标准，吸收了前辈们的经验，配合现代打包工具，提供了最强悍的性能和开发体验。当你下次再看到 seajs.use 或 layui.use 时，请对它们保持敬意。因为正是这些“老古董”，为今天现代前端的摩天大楼，铺下了第一块基石。

前端路由管理

2509_93941777的博客

11-28

400

这种机制在单页应用（SPA）中特别常见，比如Vue.js或React项目里，用户点击链接时，URL会变，但页面不会整体刷新。这样一来，应用可以更流畅，减少等待时间。记得有一次，我在一个电商项目里用Vue Router做商品详情页的路由，通过动态路由参数传递商品ID，配合axios异步加载数据，页面切换又快又顺。通过动态import()语法，可以把路由组件拆分成独立的chunk，用户访问时才加载，大大提升首屏速度。还有404页面的处理，最好设置一个通配符路由，捕获所有未匹配的路径，避免用户看到空白页。

养老保险|智慧养老|基于springboot+vue养老保险系统设计与实现(源码+数据库+文档)

伟庭的博客

11-30

539

【摘要】本文介绍了一个基于SpringBoot+Vue的智慧社区养老系统开发项目。针对传统社区养老管理效率低下的问题，系统实现了公告管理、健康档案、养老政策等核心功能模块。采用Java技术栈开发，包含项目管理、养老政策管理、公告管理等后台管理界面，并展示了实体ER图与核心代码片段。系统旨在提升社区养老服务的信息化水平，为老年人提供便捷的健康管理服务。项目适合作为计算机专业毕业设计选题，文末提供了源码获取方式。

Vue3 新的组件

最新发布

洋葱的博客

11-30

130

什么是Teleport？——Teleport是一种能够将我们的组件html结构移动到指定位置的技术。在Vue3中：组件可以没有根标签，内部会将多个标签包含在一个Fragment虚拟元素中。1、等待异步组件时渲染一些额外内容，让应用有更好的用户体验。在Vue2中：组件必须有一个根标签。好处：减小标签层级，减小内存占用。一、Fragment。二、Teleport。三、Suspense。

vue3全局引入 vant

03-14

### 如何在 Vue 3 中全局安装和配置 Vant 组件库 #### 安装 Vant 为了在 Vue 3 项目中使用 Vant，首先需要通过 `npm` 或 `yarn` 来安装最新的 Vant 版本。执行以下命令完成安装： ```bash npm install vant ``` 这一步会自动下载并安装适用于 Vue 3 的最新版本的 Vant[^1]。 --- #### 配置 Vant 全局引入在 Vue 3 项目中实现 Vant 的全局引入，通常需要修改项目的入口文件（通常是 `main.js`）。以下是具体的操作方法： 1. **导入所有组件** 使用 ES6 的模块化语法将所有的 Vant 组件及其样式一次性全部加载到项目中。这种方式适合开发阶段或者对打包体积要求较低的情况。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 导入 Vant 组件库 import Vant from 'vant'; import 'vant/lib/index.css'; const app = createApp(App); // 将 Vant 注册为全局插件 app.use(Vant).mount('#app'); ``` 上述代码实现了 Vant 的全局注册，并应用其默认样式[^2]。 2. **注意事项** 如果发现某些功能无法正常使用，请确认当前项目中的 Vant 和 Vue 版本是否匹配。如果不匹配，则可能需要卸载现有的 Vant 并重新安装合适的版本[^3]。 --- #### 自定义主题与样式覆盖当需要自定义 Vant 主题时，可以通过 SCSS 变量的方式调整组件外观。例如，在项目根目录创建一个名为 `theme.scss` 的文件，用于存储变量设置： ```scss $primary-color: #07c160; $font-size: 14px; @import "vant/es/style/theme"; ``` 接着，在 `vite.config.js` 或其他构建工具配置文件中指定该文件路径作为预处理器选项的一部分。对于 Webpack 用户来说，可以在 `webpack.config.js` 文件里添加如下内容： ```javascript module.exports = { sass: { additionalData: '@import "./src/styles/theme.scss";', }, }; ``` 如果只是简单地覆盖某个特定组件的样式而无需更改整个主题颜色方案的话，可以利用 `/deep/` 深度选择器来达到目的。 --- #### 常见问题排查 - 若遇到组件显示异常或报错情况，建议先检查依赖项之间的兼容性关系； - 对于生产环境下的性能优化需求而言，推荐采用按需加载而非上述提到的整体引入方式； ---