夏尔的小酒馆

在Vue项目中封装async-validator[1]作为请求数据验证器，从此告别百度找正则！

ElementUI的隐藏组件，官方没放出来，但是可以直接在项目中使用。用了也有一两年了，记录一下方便自己copy。重点：1.设置外层容器的高度，2.设置组件样式style="height:100%"<template> <div style="height:600px;"> <el-scrollbar style="height:100%"> ...

造不完的轮子，封不完的插件。网上什么都有，但是有那找的功夫，自己都写完了。漫岛仍然在向前推进，只是你们看不到最新的更新内容了，剩余的不会展示，等以后上线了再去看把。讲一下如何写一个的Vue插件，（以一个极其简单的loading效果为例），会了这个其他不愁。 第一步，在components目录建一个Loader.vue文件用来当做我们的loading模版,简单写了下(我用的less)。&amp;amp;l...

简单讲一下Vue项目前端路由（Vue-Router）的意外处理，即当用户输入了网站不存在的地址，跳转到指定页面，不至于让页面显示一片空白，用户一脸懵逼，然后吐槽一波你的网站！ 废话不多说，在你的router配置脚本（.js文件）的最后面加上一行配置项，代码如下：{ path: '*', name: 'Error', component: ErrorPage,}p...

问题：Vue项目用了axios,vuex以及ES6语法等一系列看起来很高大上的新技术后，在IE9-11浏览器直接白屏。 原因：IE对ES6语法支持极差，IE也不支持promise，vuex,axios都依赖promise。 解决方案： 1.首先解决es6语法不兼容的问题，用bable转换成es5（不是es2015），执行安装命令 cnpm install --save-dev ba...

开发后台管理项目时使用了iview框架，实现模态窗的时候用到其Modal 对话框组件，复制粘贴官方代码时。遇到如下问题：只要点击确定按钮，modal永远会关闭，return都阻止不了其关闭。我本来在里面做了一个数据提交操作，在数据提交前要判定数据是否合法，不合法就提示用户修改，但我发现在@on-ok=&amp;quot;ok&amp;quot;的ok方法里写return没有任何卵用，只要点击了确定按钮，modal总是会关闭。&amp;amp;...

vue、vue-Router是用来做单页面应用的，有的时候需要打开新页面用户体验才好，比如（点击图片进入放大模式）：这时候打开新页面浏览这个订单详情很明显比较合适（杠精走开）。总结了一下，Vue项目使用Vue-router打开新页面的时候一共有如下几种方法，分别适用不同的场景：1.在template中，直接给它加上target='_blank'属性即可，反正最终它也会被解释为一个a标签&amp;amp;...

好久不见，最近很忙，大家依然可以关注漫岛的最新动态。今天要说的是Vue项目的一些打包技巧，都是我在漫岛使用过的，因为我们没钱买高配置服务器（目前还是个测试服务器），所以就只能把优化做到更优了。随着项目开发，上线包体积的增大，尤其是我们的vendor.js,这会让项目首屏加载缓慢，白屏好一阵子，这显然是很loser的。于是我便进行了以下几步操作，成功的优化了vendor.js的体积，以前1m多的...

本文主要讲述vue-cli3.0项目中如何使用骨架屏技术提高用户体验。效果图如下：文章是对Yinzhishan的简书内容的实践操作和整理，原文请戳前面链接。具体执行如下四步即可实现（本人亲测有效）：1.添加vue-skeleton-webpack-plugin插件npm install vue-skeleton-webpack-plugin2.在app.vue同级目录下创建骨架模板...

使用项目构建工具webpack或者vue-cli时，打包好的项目放服务器上背景图片都显示不出来，控制台提示资源404 not found,解决办法如下：在build文件目录下找到utils.js文件 找到如下代码，添加一行代码：publicPath: '../../'即可解决。 如果不行的话… 你来找我啊，放马来啊！！！Q：939524080。 漫岛最新进度：4xiaer.co...

2018-07-19，22：37，今天完善了漫岛（了解漫岛）的登录注册流程，但这一块暂时不上线。 调取接口的时候发现在请求的url上要重复写接口前缀“http://xxx.com”，当然不能每次都这么写，如果以后接口换成https，或者前缀改了，一个个的改起来那估计得头疼死，于是引出了今天的博客主题： Vue项目如何引入全局变量方法很多，我就以我的代码为例吧，就两步： 1.在com...

我本人一直在关注前端的新框架，先说说我学习Vue的初衷。作为一个刚出道的前端开发工程师，最开始写代码的时候大部分用的是原生JavaScript实现的，我记忆力比较好，没事喜欢背W3C的一些关于原生JS的细节，所以在我开始工作的时候，我是不愿意采用jQuery的，因为所有的效果基本上我都能实现并且做到兼容（我们只要求兼容IE9以上）。但是后来CTO看见我还在写原生，他可能对我不是太放心或者觉得这样维

在使用Vue的时候，有时候我们希望直接用Js操纵DOM来实现某些效果，具体实现只用利用Vue提供的ref属性以及this.$refs即可实现。下面放一个小DEMO！ Examples .box{width: 200px;height: 200px;border: 1px solid #f00;} 这是一个盒子

用Vue实现在用户输入的时候向后台请求候选项，支持键盘的上下选择以及Enter确认选择。做了控制请求次数的优化！注释十分详细后台返回的数据是自己模拟的，直接贴代码了。只用引用Vue.js即可，其他样式表或者函数库有没有都无所谓。这是夏尔自己封装的众多组件库的其中之一而已！ 搜索联动 --> [v-cloak] {

说下我个人的理解，错误望指正。 我个人对这个方法的理解是，为已经在Vue的data里面声明过的变量添加新的属性值并确保其可以被监听。 举一个我常用的场景就是根据后台返回的值渲染一系列选项时，为了做一个点击“active”的效果，我一般都这么写代码。 实现的效果可以用简单的图来说明。 总结来说就是在获取到数据之后，使用vm.$set()给返回的数组里面每一个数据添加一个新的属性值，使用s

前端处理一些金额，数字类的数据要求按照固定的格式显示，比如9,527,025，或者带有小数（如1,587.23）仍要三位一断。有些话也不必多说，既然要求如此，实现呗。 作为前端主流框架之一的Vue，类似的功能肯定都有人写的很完善了。我呢，最讨厌不动脑筋去网上找现成的，所以我自己写了一个。话不多说，先放效果图再贴代码(为了展现思路，我面向过程写的，另外这个是针对保留两位小数的数字进行过滤，因为...

年前的一个项目中做到一个星级评分功能，以前都是用jquery.raty.js这款插件来做的，这个插件确实封装的很方便也很好用，但是毕竟是一个函数库（考虑各种适配，健壮，可扩展），代码行数还是有一点的，所以这次自己写了一个，70行搞定，星星数量，样式自己都可以设置，为了保留思路，我没有进行彻底的抽象封装。效果图如下： 代码如下，思路都在注释里！&lt;!DOCTYPE html&gt;...

关于漫岛的前后端配合上，采用的是rest API方式，是完全分离的。 考虑到这个项目第一期的页面不会很多，加上第一期要做的是高效率的开发，自然要利用前端的自动化工具。 开始直接用Vue-cli3.0，Vue官方出品脚手架，基于webpack但是做了很多自己的封装和插件选择，这里不推荐对配置完全懵逼的小伙伴使用，要求node版本大于8.0。 值得一提的是vue-cli3.0提供了一个可视化UI...

2018-07-18夜晚22：30，漫岛已经写好一些页面了，目前在等待登录注册的接口。 项目中需要给不同的页面设置title，首先查了一下网上有没有相关插件，哎，有！爽、名称叫做vue-wechat-title，使用方法非常简单，具体如下：1.先安装插件，命令行执行cnpm install vue-wechat-title --save即可安装。2.引用插件，在main.js中，首先...