vue
文章平均质量分 60
小圣贤君
万丈红尘一码农
展开
-
vue项目中npm install初始化报错以及‘cross-env’ 不是内部或外部命令问题
cross-env’ 不是内部或外部命令,也不是可运行的程序或批处理文件。如果你碰到这个问题,你的项目中node_modules应该是没有正常创建成功,导致找不到依赖包。如果有node_modules文件夹,请删除node_modules文件夹,然后重新执行npm install命令。如果没有,你的命令行中一定会有大量报错。这就牵扯到了npm install初始化项目报错问题,该如何解决?npm install --ignore-scripts请按照此命令执行,查看执行效果。...原创 2021-07-27 18:06:35 · 2038 阅读 · 0 评论 -
自定义ElementUI风格树形组件,详解递归组件的使用及事件数据传递,视图更新等问题
组件视图样式当我们做多级菜单或者权限列表管理的时候,大多会采用树形结构来实现,有的朋友为了省事,不想多费脑力,多费时间,直接几层for循环就做了个差不多的属性组件,更省事的朋友直接拿ElementUI中的Tree树形组件来完成需求,这时,稍微有点要求的产品就来要求了:不行,这组件样式都是竖着的,要是权限列表多了,这还了得?改。这里笔者仿照ElementUI的风格,自定义了个简单的树形组件,先看样式:递归组件说明什么是递归组件?简单的说就是组件自己调用自己。有些朋友可能就懵了,哎呦卧槽,组件还能调原创 2020-09-22 17:49:51 · 2329 阅读 · 0 评论 -
IOS上从第三方页面回跳VUE页面页面不刷新问题
情景描述:IOS系统环境下,从微信的vue页面A中跳转到第三方页面B,然后点击浏览器返回按钮返回A页面。问题描述:IOS系统下,A页面没有刷新;Android正常刷新。问题解决:在A页面mounted中添加如下方法:window.onpageshow = function(e) { console.log("执行了onpageshow"); if ( ...原创 2020-03-11 11:34:48 · 2213 阅读 · 0 评论 -
使用vue开发一个双向展开的卷轴组件
我们在项目实践中,偶尔会为了增加页面内容的显示效果,使用卷轴展开的形式展示页面内容,以此来增加良好的交互和趣味性,卷轴的展开方式有两种,一种是向左或者向右单向展开,另一种是从中间向两边双向展开。单向展开的卷轴实现起来相对比较容易,笔者不做讲解,这里笔者主要说明双向卷轴的实现。先上效果图,感兴趣的继续,没兴趣的过。思路:1.显示未展开状态下的显示样式。2.显示完全展开状态下的显示样式。...原创 2019-10-18 18:57:38 · 1353 阅读 · 2 评论 -
vue页面内容生成图片并保存本地方案
既然你打开了这篇博客,那么你肯定碰到了和页面截图多少相关的问题,你在浏览器内生成图片也好,微信内生成页面图片也好,都需要面对把页面内容转成图片的问题。1.将整个页面转成图片;2.将页面内部分内容转成图片。解决方案如下:1.引入html2canvas为了更便捷有效的开发,这里可以引入html2canvas这个插件,如果读者不想采用这种方案,可以跳过下面内容,自行寻求其他解决方案。点击可以...原创 2019-03-29 13:55:14 · 30253 阅读 · 28 评论 -
vue项目中vue-echarts讲解及常用图表方案实现
图表类的项目操作一般常见于管理平台系统,移动端项目中并不是特别常见,不常见不代表没有,在一些商城类应用中,商家需要看到商品的销量分析,盈利分析等,就需要用到图标,比较常用的图标库,像百度的ECHARTS,蚂蚁金服的AntV都是不错的图标库,感兴趣的读者可以直接到他们的官网阅读相关的资料,笔者这里不做优劣说明,主要针对vue-echarts的一些图表方案进行讲解。vue-echarts是基于ech...原创 2019-04-22 13:23:12 · 114566 阅读 · 9 评论 -
vue使用canvas开发漂亮的多功能手写板组件
此组件主要用于vue项目内签字手写功能,可显示缩小版,全屏版两种类型,三种笔画颜色可选择,手写完成可获取手写结果。点击“重写”,会清空手写板内容; 点击“完成”,会将手写板内容生成图片,此时,不可以再进行手写操作,点击重写可重新进行手写,可以在此方法中获取生成的图片信息;点击“横版/返回”,可以进行手写板缩小版和全屏版模式切换。示例图片:组件使用示例: <handwriting-...原创 2019-05-13 10:07:08 · 4488 阅读 · 3 评论 -
vue开发一个实用美观的轮播图组件
网上有不少vue开发的轮播图资源,相信读者也看过不少,这里笔者开发了一个轮播图组件,简单美观实用。先上示例图:常见的轮播图都是占满屏幕的形式,像上图所示的轮播图虽然经常见到,但是在一些常见的轮播组件中并没有这种形式,所以笔者专门针对这种形式的轮播图开发了一个组件。该组件暂时由两种形式:正常模式normal,缩放模式zoom,缩放模式即为上图所示模式。思路:1.构思常见轮播图的实现。2...原创 2019-06-05 17:42:38 · 17390 阅读 · 6 评论 -
Error: Loading chunk * failed,Vue Router懒加载报错问题解决方案
最近vue项目路由改成了懒加载方式,刚开始并没有什么问题,清空项目文件,重新下载配置运行后,就发现控制台报以下错误:[vue-router] Failed to resolve async component default:Error:Loading chunk 10 failed.刷新页面后,就不会再报错,思来想去应该使用路由懒加载后,组件加载异常导致的,但是究竟是什么原因,暂时不知...原创 2019-07-09 13:05:36 · 41172 阅读 · 17 评论 -
html2canvas在安卓端微信里截取从相册打开的图片空白问题
需求描述:在一个页面里显示两张图片,一张静态图,一张用户从相册或者拍照获取的图,然后将这两张图片合并,并保存。问题描述:原创 2019-09-26 14:20:48 · 1438 阅读 · 0 评论 -
vue项目白屏问题汇总,多方案详细解决
来了,兄弟,别急,咱们慢慢往下看。项目打包之后,本地打开文件显示白屏了?微信公众号里打开项目白屏了?苹果手机打开白屏了?死活都有部分iPhone机型是白屏显示的?兄弟,别急,咱们走起……1,ios10 出现白屏原因是由于ios 10中Safari中错误描述如下:当你定义一个与参数同名的for循环迭代变量时,我们错误地认为这是一个语法错误。解决方法如下:进入build文件夹;找到w...原创 2019-04-01 11:32:27 · 13919 阅读 · 6 评论 -
vue + element中el-table导出excel
第一步: 安装依赖:npm install --save xlsx file-saver这里安装了两个依赖插件,感兴趣的读者可以去点开下面的链接,查看源码: https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 第二步: 引入使用: 在你需要导出excel的vue组件里面引入,引入...原创 2018-08-08 14:40:21 · 6868 阅读 · 40 评论 -
vue项目实践教程1:vux项目搭建和简介
vue作为比较受欢迎的前端开发框架之一,因为其优雅的代码结构,轻量化代码设计,简介易懂的API,灵活易用的指令和属性广受前端开发者的喜爱,其学习成本和学习难度相对react来说要简单很多。 这里,笔者以一个小项目为例,向大家介绍vue的使用和开发。 在了解本文章之前,你需要掌握css,html,javascript等前端基本技能,最好已经对vue有过简单的学习了解,你可以通过vue的官网或者菜原创 2018-01-15 19:29:52 · 4910 阅读 · 2 评论 -
vue中当图片地址无效的时候,显示默认图片
web项目中经常需要展示图片,很可能就会碰到图片地址无效的情况,比如图片地址不对,或者后台拿到图片地址后,该地址无效,或者数据库中没有该图片等情况。这时候,图片就会显示一个叉。 对于项目中出现的这种情况,我们也可以不做处理,但是比较影响美观,所以我们都会使用一个默认的图片来代替图片原来的地址。:src="item.img" @error="imgError(item)" />给图片添原创 2018-01-25 18:54:35 · 9526 阅读 · 0 评论 -
vue组件报错问题
Invalid value for option "components": expected an Object, but got Array出现这个错误,查看一下组件的编写是否有误,components应该是一个对象而不是一个数组,如果你写成了开一个数组,就会报这个错误,同时,还会报下面这个错:did you register the component correctly? Fo原创 2018-01-25 18:57:22 · 8333 阅读 · 0 评论 -
vue 实现压缩图片上传到oss
我们偶尔会在项目中碰到上传的需求,对于部分前端开发人员来说,上传资源是一个比较头疼的事情,你要根据各种不同的UI设计,设计出相应的上传页面样式,上传的地址不一样,可能你的处理就会不一样。你可能选择使用插件,或者自己动手写一个。这里笔记简单介绍一个vue项目的中上传示例,不适用插件,自定义样式和上传,最终上传到阿里云中。 先看一下样式吧: 这种样式设计效果应该是大多数前端上传的设计样式,针对...原创 2018-03-15 19:22:45 · 6415 阅读 · 0 评论 -
vue 中二维码的使用和工具比较
在开发项目中,有可能会碰到生成二维码的需求,尤其是在微信相关的项目中,可能会涉及扫码登录,扫码查询等功能。这里笔者为大家介绍两种vue项目的可以使用的二维码工具。 首先,先看一下示例效果,感兴趣的可以继续往下看: 示例中是用两种不同的二维码工具生成的三种表现效果,下面来介绍一下生成二维码的两种工具。 第一种:vue-qart vue-qart文档地址 安装:npm install v...原创 2018-03-17 18:09:29 · 4986 阅读 · 2 评论 -
vue项目实践教程3:中间大的五选项底部切换卡制作及相关问题解决
在移动端项目中,有不少项目会有底部切换卡的功能需求,类似于app应用,点击底部不同的切换卡,显示不同的界面,表现不同的功能。 这里,笔者展示一个采用vux-uid 五选项切换卡,同时,中间的选项卡比较突出,样式如下: 样式表现比较好看,其实表现起来也很简单。 如果不考虑中间的图片突出,整体的表现直接参照vux官方文档的Tabbar就可以很简单的实现,vux tabbar 在这里,中间的...原创 2018-03-18 21:32:45 · 1061 阅读 · 0 评论 -
vue中给window添加滚动监听无效的解决方案
页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作。 我相信不少网友查阅过类似的资料,网友给出的解决方案,很多都是在mounted中添加window.addEventListener("scroll", this.handleScroll);采用这种形式来实现页面监听滚动的效果。 笔者最初也是采用了这种方...原创 2018-04-08 14:00:02 · 13575 阅读 · 5 评论 -
vue element隐藏组件滚动条scrollbar使用
pc端项目中,有时候会在页面内部出现滚动条的情况,windows浏览器默认的滚动条是很丑的,尤其是当滚动天出现在页面内部的时候,这时候,为了页面美观,可以考虑优化滚动条样式。 vue Element UI官方文档上并没有放出滚动条相关的示例说明,但是实际上是有这么一个组件的,读者查看element源码,就可以查到这个组件scrollbar,至于为什么不放开这个组件就不得而知了。 效果图如ele...原创 2018-03-28 21:49:01 · 79721 阅读 · 21 评论 -
小程序通过web-view访问的vue页面中点击无法跳转到小程序相关问题
问题描述: 点击小程序中的一个按钮或者一个banner图片,通过小程序web-view组件到进入一个vue的页面中,在该vue页面中点击图片无法按照要求回到指定的小程序中,点击操作没有任何反应。 解决思路: 小程序的官方文档中有如下介绍,引入微信的JSSDK1.3.2就可以执行在网页中跳转到小程序等功能。&lt;!-- html --&gt;&lt;script type="tex...原创 2018-07-19 20:07:38 · 6738 阅读 · 5 评论 -
vue项目实践教程2:使用vux设计登录注册,并讲解vue路由,切换页面标题等内容
上一章笔者介绍vux项目的搭建和简介,这里笔者设计几个登录注册页面,来讲解vux中的相关组件的使用,和vue的相关基础知识。 1.我们在与components文件夹同级的目录下创建一个views文件夹,文件夹中再创建一个user文件夹,用于存放和用户相关的页面操作。 在user文件夹下,笔者先创建一个Regist.vue文件。 2.现在注册组件已经有了,但是我们怎么才能让这个组件显示出来呢?原创 2018-01-22 20:49:05 · 10132 阅读 · 4 评论