vue2.0基于vue-cil使用vant组件图片预览报错问题，及解决方法

最新推荐文章于 2024-04-27 18:46:09 发布
最新推荐文章于 2024-04-27 18:46:09 发布
阅读量905 收藏 7
点赞数 2
分类专栏： vue 文章标签： vue.js 前端 javascript 前端框架 npm Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/UVliuwei/article/details/128889964
版权
项目内容：

实战项目是在vue-cil脚手架中基于vant组件实现图片预览（函数方法）

主要问题：

  1. npm与eslint版本号冲突无法安装插件问题；

  1. vant版本文档问题；

  1. cnpm安装组件与npm安装组件差异问题

  1. 如何使用npm忽略版本号解决版本号冲突及组件报错问题

vue以及vant版本号如下所示：

最低0.47元/天 解锁文章
自学前端啥时候是个头
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
vant上传图片跟视频混合上传加预览demo
11-08
vant 中的上传组件只能上传图片跟其他文件,只带默认的预览. 这里支持视频预览.视频录制.可同时选中相册的视频跟图片一起上传.npm run dev 就可以了.免c币下载地址: https://download.lllomh.com/cliect/#/product/JB08857273648214
vue项目中使用vue-i18n报错的解决方法
12-09
前言 Vue-i18n大家应该都不陌生，Vue-i18n安装的安装方法如下： npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候，居然报错了，通过查找相关的资料终于找到了解决的方法，下面话不多说了，来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地，添加路由的时候，稍不注意就会遇到以下情况： Value of key ‘xxx’ is not string! Cannot translate the value of keypath ‘xxx’. Use the value of keypath as defa
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
10-18
今天小编就为大家分享一篇vue2.0 使用element-ui里的upload组件实现图片预览效果方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
npm安装Vant报错
最新发布
2301_80077119的博客
04-27 261
安装Vant报错
vue3图片预览插件.zip
06-14
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，放心使用。 实现方式参考了 vant 部分源码，纯手写并未使用任何三方插件，可放心使用。本来只是一个简单的 pc 端图片预览插件，但是考虑到有些小伙伴可能需要兼容移动端，故特意做了兼容
vant showImagePreview 图片预览用法
jjw_zyfx的博客
03-13 2121
vant showImagePreview 图片预览用法
uniapp项目引入vant2遇到报错Uncaught ReferenceError: require is not defined完美解决方案
番茄Salad
02-19 1万+
【代码】uniapp项目引入vant2遇到报错Uncaught ReferenceError: require is not defined完美解决方案。
vant-ui中toast组件使用时引用本地图片报错 只需要引入组件时在icon属性中写路径时加个require属性即可
wjr123ww的博客
09-27 1088
这里写自定在这里插入图片描述 义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 义目录标题) 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的
not found: * vant/lib/vant-css/index.css in ./src/main.js
Devin_Chen的博客
04-11 1万+
This dependency was not found: * vant/lib/vant-css/index.css in ./src/main.js To install it, you can run: npm install --save vant/lib/vant-css/index.css WAIT Compiling...11:03:17 之前写过一个vant的项目...
vant UI 使用 ImagePreview 预览图片
weixin_44590591的博客
02-15 2101
vant UI 使用 ImagePreview 预览图片 通过 npm 安装 // Vue 3 项目，安装最新版 Vant npm i vant // Vue 2 项目，安装 Vant 2 npm i vant@latest-v2 需要预览图片的页面使用 // 局部使用： import Vue from 'vue'; import { ImagePreview } from 'vant'; Vue.use(ImagePreview); export default { components: {
vue+vant使用图片预览功能ImagePreview的问题解决
11-20
如果您搜到这篇文章的话，那员外估计您遇到跟我一样的问题了，即在打开图片预览功能后，如果不关闭预览的图片，同时改变路由的话，会发现即使路由改变了，预览的图片还在文档的最顶层显示，如图：    着实让员外...
ImagePreview
05-31
图片在web中的预览，可在web中预览将要上传的图片
vue--图片预览器（vant）+ 安卓返回键处理
Wangdr的博客
03-04 7692
vant的图片预览 运用详解： <div class="img_box" v-for='(item2,index) of item.images' :key='index'> <img :src="item2" alt="" @click="getImg(item.images,index)"> </div> //图片预览，通过传参的方式把
【Vant 】组件基础使用
weixin_47375144的博客
01-17 2034
1、ImagePreview 图片预览 <template> <van-cell title="图片预览" center> <img :src="images" @click="choosePicture(images)" /> </van-cell> </template> <script> import { ImagePreview } from 'vant' export default{ dat
微信小程序手机预览报错，undefined is not an object 真机调试和开发工具都没有问题
qq_15006083的博客
10-14 8038
小程序手机预览报错，undefined is not an object 真机调试和开发工具都没有问题 项目： uniapp项目开发下程序，真机调试和开发工具都没有报错，真机预览报错如下，不能预览 解决方式：通过代码排查，发现有2处地方影响， （1）uniapp在scss样式中使用条件编译影响了，要去掉条件编译，放.vue页面编写 （2）使用iconfont图标，小程序手机预览不能显示出本地的图标，所以引入的时候需要通过网上链接来引入图标字体 iconfont，使用网上链接方式引入，不然手机预览解析不了
uniapp引入vant报错Module build failed (from ./node_modules/postcss-loader/src/index.js) SyntaxError
weixin_45782529的博客
09-17 5131
我uniapp中main.js引入vant 样式import 'vant/lib/index.css';出现报错,如下 找了很多解决办法都没效,最后解决了,方法如下: (1)在项目目录下建立一个html文件,文件名自定义, (2)在app.vue中引入vant样式,之前main.js中的vant样式删掉 app.vue main.js 运行项目即可 ...
vant 组件 ImagePreview 图片预览 报错
qitiandada的博客
08-04 1500
前言 vant的 ImagePreview 组件 很好用 直接传入图片数组，就可以实现预览。 直到 有一天忽然报错 顺着报错的js去看了一下 里面的this.parent 是 undefined 解决 把依赖包删掉 npm i 下载 不要用 cnpm！ ， 不要用cnpm！ ， 不要用cnpm ！ ...
Vant Uploader 文件上传手机上所遇到的坑
热门推荐
YoungMasters的博客
03-13 2万+
Vant Uploader 文件上传手机上所遇到的坑 公司H5项目文件上传用到了Vant Uploader文件上传组件，但是这个组件的坑属实是真的多，写这篇文章给大家分享一下，如果问题和我同样的话就不用纠结了，可以直接换组件了~~ 问题1：我在谷歌浏览器的模拟器中测试可以，为什么在手机上却没有办法显示，如下图 这个问题总共是有2处坑 关乎公司所购买的服务器，图片上传是经过服务器上传的，如果你...
基于vant 使用 ImagePreview 预览图片
qq_36437172的博客
08-24 1万+
1.首先引入ImagePreview和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。 import { ImagePreview } from 'vant'; 2.在图片中添加click事件 <div class="img_box" v-for='(item2,index) of images' :key='index'> <img :sr...
vue2.0中使用ant-design-vue
08-16
在Vue 2.0中使用Ant Design Vue，你需要按照以下步骤进行设置： 1. 首先，安装Ant Design Vue的依赖包。你可以使用npm或者yarn进行安装。打开终端，运行以下命令： ``` npm install ant-design-vue --save ``` 或者 ``` yarn add ant-design-vue ``` 2. 在你的Vue项目的入口文件（一般是main.js）中，导入Ant Design Vue的样式和组件。添加以下代码： ```javascript import Vue from 'vue'; import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; Vue.use(Antd); ``` 3. 现在你可以在你的Vue组件中使用Ant Design Vue的组件了。在你的组件中，按需导入你需要使用的组件。例如，在一个.vue文件中： ```vue <template> <a-button type="primary">Primary Button</a-button>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

自学前端啥时候是个头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值