2022/07/21 vant3引入踩坑

原创 已于 2022-09-20 10:43:50 修改 · 670 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

于 2022-07-21 11:40:57 首次发布
在 Vue3 项目中按需引入 Vant3 后，尝试在公共文件注册并在页面使用 ImagePreview 和 Toast 组件时遇到错误。浏览器控制台显示错误。尽管引入方式与官网文档一致，组件仍然无法正常使用。解决方法是在引入 Vant 的地方同时引入样式文件，确保组件样式生效。

问题
在vue3项目中引入vant3插件
main.js中按需引入后（想在一个公共文件中引入注册），在页面上使用会报错
如ImagePreview和Toast

报错代码
1.页面引用
在这里插入图片描述
2.单页面使用
在这里插入图片描述
3.浏览器控制台报错
在这里插入图片描述
解决方法
在这里插入图片描述
就是不知道为什么，在main.js中一起引入的组件不能使用

官网文档
在这里插入图片描述
但是引入方法是一致的，官网也没有表明是引入到一个文件的还是只是在使用页面里面引入

解决：引入vant的地方,再引入样式
在这里插入图片描述

uniapp使用vue3引入vant踩过的坑
2201_75491624的博客
08-29 2955
整理了在使用hbuilderX创建uniapp时踩过一些莫名其妙的坑,顺便理一下创建项目和导入vant的过程~~踩坑:1.下载vant后没有node_moduled文件2.引入vant后无法使用组件。
移动端vant的踩坑
weixin_58896221的博客
08-03 1145
vant报错问题
vue项目引入vant后不生效问题的解决办法
sharleen84的博客
08-13 6344
之前创建项目时，直接使用vue add vant的方式引入，很方便，一键完成安装、引入、配置及使用。但是存在一个问题，就是版本较低，vue官方好像很久没有更新这个vant了。所以决定手动安装引入配置。其次是引入 vant.js import 然后 Vue.use 在main.js中引入。其实也可以用vue add vant的方式一键部署后，再通过更换版本来完成版本更新的。以为这样就完了，结果就是样式不生效。原因就是缺少样式文件的引入。安装后，再启动，就成功了！会自动更换相关的连接。...
Vue组件失效（全局组件注册成功但未生效，非命名问题）
qq_41422946的博客
10-29 8712
最近在写一个vue的项目，发现写好组件并引入之后标签没有任何效果，也没有报错。 我们先看一下我的vue实例： var actDoubleEleven = new Vue({ el: "#actDoubleEleven", data: { }, methods: { }, created: function () { var ...
vue项目引入vant组件报错‘未注册’
乔的博客
04-30 3293
报错：export ‘ActionSheet’ was not found in ‘vant’ 在vue项目中引入的vant组件，看了官方文档，版本已经更新到2.几了，但是我本地只有1.6几。 在项目进行过程中很多组件都报错类似："export ‘ActionSheet’ was not found in ‘vant’； 查询到解决方式升级本地版本，升级命令： npm install vant@2...
vue3 cli引入vant3
weixin_44923498的博客
04-15 822
自己引入不了，很多方法试了试也没用，记录一下解决方法 修改main.js文件为： import { createApp } from ‘vue’; import App from ‘./App.vue’; import router from ‘./router’; import store from ‘./store’; import ‘vant/lib/index.css’; import loadVant from ‘./libs/vant’; loadVant(createApp(App) .use
vue3.0引入vant3
glf910705的博客
12-08 1840
vant3官网：Vant - Mobile UI Components built on Vue 安装：npm i vant@3 在非 vite 项目中按需引入组件（推荐） 在非 vite 的项目中，可以通过 babel 插件来实现按需引入组件。我们需要安装babel-plugin-import插件，它会在编译过程中将 import 语句自动转换为按需引入的方式。 1. 安装插件 npm i babel-plugin-import -D 2. 配置插件 在.babelrc 或 babe..
微信小程序npm引入vant-weapp的踩坑记录
10-16
微信小程序开发中引入第三方库，尤其是使用npm进行依赖管理，是开发过程中常见的一种需求。本文详细记录了在微信小程序项目中引入...希望本文分享的微信小程序npm引入vant-weapp的踩坑记录对其他开发者能够有所帮助。
详解vantUI框架在vue项目中的应用踩坑
10-17
vantUI 不直接提供全国地址数据，但开发者可以引入第三方的地址数据，如 `area.min.js`，然后将其绑定到 `areaList`，以支持地址选择组件。这样用户在选择地址时，可以得到完整的省市区数据。 4. 保存地址： 当...
Vue3注册全局组件不生效问题
weixin_41586389的博客
11-10 4376
Vue3注册全局组件不生效问题 新创建一个项目后，需要注册全局组件，发现页面并没有什么反应，控制台没有报错，但是有个警告 解决办法： 添加vue.config.js文件，添加配置如下： runtimeCompiler: false, //是否使用包含运行时编译器的Vue构建版本 chainWebpack: (config) => { config.resolve.alias .set('vue$', 'vue/dist/vue.esm-bundler.j
vue中使用vant的几种引入方式-(全局引入，按需引入，页面中引入)
JackieDYH的博客
09-26 5165
babel-plugin-import是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。: 配置按需引入后，将不允许直接导入所有组件。在现有项目中使用 Vant 时，可以通过。
Vant 组件库的安装、按需引入、全局引入及样式修改
m0_61663332的博客
12-26 6842
Vant 移动端组件库的安装、按需引入、全局引入及原有样式修改
vue3引入vant3配置整合详情（按需引入）
qq_38132995的博客
09-13 5806
一、 安装 Vue Cli npm install -g @vue/cli 二、创建一个项目，hello-world为你定义的项目名称 vue create hello-world 三、安装vant依赖 npm i vant@next -S 四、按需引用 npm i babel-plugin-import -D 五、项目根目录下babel.config.js文件下配置 module.exports = { presets: [ '@vue/cli-plugin-babel/preset'
vant3按需引入没样式
吹口琴的喵喵~~的博客
07-01 1351
根据 vant 教学文档里:https://vant-contrib.gitee.io/vant/v3/#/zh-CN/quickstart 安装 babel-plugin-import 插件, 并配置 .babelrc 或 babel.config.js (主目录里有哪个, 就按哪个配) 后: // 原始代码 import { Button } from 'vant'; // 编译后代码 import Button from 'vant/es/button'; import 'vant/es/butto
vue3.0 + vant3.0快速搭建项目
j1440583965的博客
10-19 4595
vue3.0 + vant3.0快速搭建及体验 2020年09月18日，vue.js 3.0正式发布，去网上看了看关于3.0的教程都不够完整，但其实vuecli最新版已经支持了vue3.0项目的快速搭建，这篇文章将带你了解一下vue3.0有哪些新的改变以及如何快速搭建vue3.0项目。 一、项目的搭建 1.首先，nodejs的安装不用我多说了吧，[nodejs官网地址](https://nodejs.org/zh-cn/)。 2.既然vuecli最新版已经可以快速搭建3.0了，那怎么升级到最新版呢？[vu
vue3 vant组件的引入方式
键指江湖的博客
08-02 4164
介绍vue3 中如何使用vant组件
vue学习笔记（三）之vuex
qq_44743216的博客
04-10 1208
vuex简介 简介 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。 Github 地址: https://github.com/vuejs/vuex ...
vue3.x 中使用 vant3.0 的 ImagePreview 组件遇到的问题
xiamoziqian的博客
12-28 2607
函数调用的方式使用 起初，想和其他组件一样在公共文件中引入注册 import { ImagePreview } from 'vant'; Vue.use(ImagePreview); 报错如下： 后来改变了组件的引入方式，在需要使用的页面单独引入，就可以了 import {ImagePreview} from "vant"; import { reactive, toRefs } from 'vue' export default { setup () { const state = r
【已解决】vue3+vant 引入Dialog Toast都会失败报错not defined
baidu_38730364的博客
09-08 7102
vant按需引入其他的组件没有问题，但是在引入Dialog时报错not defined.测试中，点击弹出的那个引入也可以，只有Dialog.confirm类似的就会报错，后面测试类似的Toast也是这样。在网上找了好多，都没有具体的解决方法。 后面看到一个帖子给的方法试了下，算是成功了。 我是在main.js里写要引用的组件，这样就可以全局使用了，但是Dialog和Toast上遇到了阻碍，对于这两个，在要使用的地方单独引用就不会报错。 原main.js： import { Button, Dial
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值