- 博客(26)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Vue图片验证码-自定义组件高级版
最近项目中要用到图片验证码，网上一查有很多，基本都是千篇一律的4位纯数字验证码。首先得感谢那位一代目兄台提供的模板，由于不能满足需求，所以对其进行了改造升级。经改造的图片验证码能满足一下情形使用：①、验证码位数；②、纯数字和纯字母的验证码；③、数字和字母混合的验证码；④、字母的大小写；⑤、数字和字母（大小写）混合下各自的位数；⑥、随机生成混合情况下各自的位数；⑦、验证码随机排序。大致就这些组合吧...
2019-12-13 17:46:23
617
1
原创 Vue自定义全局Toast和Loading
如果我们的Vue项目中没有用到任何UI框架的话，为了更好的用户体验，肯定会用到loading和toast。那么我们就自定义这两个组件吧。1、Toast组件首先，在common下新建global文件夹，存放我们的toast.vue和toast.js两个文件（当然文件的具体位置你可以自行安排）。(1). toast.vue<template lang="html"> <d...
2019-04-17 18:10:45
2748
3
原创 Vue与原生APP的相互交互
现在好多APP都采用了Hybrid的开发模式，这种模式特别适合那些内容变动更新较大的APP，从而使得开发和日常维护过程变得集中式、更简短、更经济高效，不需要纯原生频繁发布。但有利肯定有弊咯，性能方面能稍微差一点，还有就是两者之间的交互问题。美团、爱奇艺、微信等知名移动应用，都是采用Hybrid App开发模式。Hybrid开发已成为未来的一种发展趋势。1、原生APP与Vue交互场景：原生的头部...
2019-04-17 18:06:44
1872
原创 Vue的H5页面唤起支付宝支付
目前项目中比较常用的第三方支付无非就是支付宝支付和微信支付。下面介绍一下Vue中H5页面如何使用支付宝支付。其实很简单的，只不过是调自己后台的一个接口而已（后台根据支付宝文档，写好支付接口）。触发支付宝支付调用后台接口，后台会返回支付宝提供的form表单，我们只要在vue里面创建新节点，将返回的form表单append进去，并提交就可以唤起支付宝支付。另在此说一下这个returnUrl, 它是支...
2019-04-17 17:51:37
10478
原创 BundlePhobia
1、BundlePhobia用于分析npm package的依赖、bundle后的大小、下载速度预估等等，帮助你在引用一个package之前了解引入该package的代价。2、也可以将项目的package.json文件上传，BundlePhobia会帮你评估项目中所有包的大小和加载速度。...
2019-02-14 18:03:16
183
原创 前端性能优化之gzip
gzip是GNUzip的缩写，它是一个GNU自由软件的文件压缩程序。它最早由Jean-loup Gailly和Mark Adler创建，用于UNⅨ系统的文件压缩。我们在Linux中经常会用到后缀为.gz的文件，它们就是GZIP格式的。现今已经成为Internet 上使用非常普遍的一种数据压缩格式，或者说一种文件格式。HTTP协议上的GZIP编码是一种用来改进WEB应用程序性能的技术。大流量的WE...
2019-02-13 17:34:25
143
原创 预防cdn链接失效，无缝切换本地文件
如今的前端项目追求的不仅仅是能用能看的程度，而是愈发追求项目的性能，对用户体验的影响。而现在的开发工具在性能优化方面也替我们做很大一部分的工作，想必大家对CDN的使用都是轻车熟路了，但是大家有没有考虑过，万一我们使用的CDN服务器，地址啥的出现了问题，导致我们引用的CDN文件都拿不到了，那么我们的项目崩溃了，天了噜，崩溃了。因此我们得考虑下，引用CDN的文件拿不到了，应该有相应的处理方案，而不会...
2018-11-30 18:38:32
484
原创 Vue调试神器之Vue.js devTools
Vue项目中使用Vue.js devTools这款调试神器，可以极大程度的提高我们的开发效率。安装1、打开Chrome网上应用商店安装插件（自墙）,直接搜索devTools安装即可。贵宾传送阵，请戳这里→Chrome网上应用商店2、从github上下载到本地。贵宾传送阵，请戳这里→vue-devtools1)、进入到/vue-devtools目录下(npm install或者cnpm in...
2018-11-29 17:44:15
214
原创 vue中导出Excel表格
项目中我们可能会碰到导出Excel文件的需求，一般后台管理系统中居多，将table中展示的数据导出保存到本地。当然我们也可以通过一些处理来修改要导出的数据格式，具体需求具体对待。1、首先我们需要安装3个依赖，file-saver、xlsx和script-loader。使用npm安装：npm install file-saver xlsx -Snpm install script-loade...
2018-09-19 17:10:28
539
原创 开发分支管理模型之阿里AoneFlow
说到分支管理模型，令人最为熟悉的莫过于TrunkBased 和 GitFlow。TrunkBased 模型是持续集成思想所崇尚的工作方式，它由单个master分支和许多release分支组成，每个release分支在特定版本的提交点上从master分支创建出来，用来进行上线部署和 Hotfix。在 TrunkBased 模式中，没有显性的feature分支。GitFlow 模型是若干模式的...
2018-09-12 17:21:12
15061
3
翻译 git flow开发分支管理模型
Git Flow 是什么Git Flow是构建在Git之上的一个组织软件开发活动的模型，是在Git之上构建的一项软件开发最佳实践。Git Flow是一套使用Git进行源代码管理时的一套行为规范和简化部分Git操作的工具。2010年5月，在一篇名为“一种成功的Git分支模型”的博文中，@nvie介绍了一种在Git之上的软件开发模型。通过利用Git创建和管理分支的能力，为每个分支设定具有特定的...
2018-09-12 14:21:25
213
原创 vue动态绑定图片和背景图
1、动态绑定图片<img class="binding-img" :src="require('../assets/images/test.png')" /> 2、动态绑定背景图<div class="binding-bg" :style="{ 'background': 'url(' + require('../assets/images/'+bg...
2018-09-10 16:33:26
4043
原创 Html5test
HTML5测试分数表明您的浏览器支持HTML5标准和相关规范的程度。立即了解您的浏览器支持HTML5的哪些部分，并将结果与其他浏览器进行比较。
2018-09-10 09:31:12
2004
原创 TinyPNG
TinyPNG使用智能有损压缩技术来减少*PNG文件的文件大小。通过选择性地减少图像中的颜色数量，存储数据所需的字节更少。PNG很有用，因为它是唯一可以存储部分透明图像的广泛支持的格式。格式使用压缩，但文件仍然很大。使用TinyPNG缩小应用和网站的图像。它将使用更少的带宽和更快的负载*。...
2018-09-10 09:31:04
3017
原创 SpritePad
使用SpritePad，您可以在几分钟甚至几秒钟内创建CSS Sprite。 只需拖放图像即可立即生成PNG精灵图像和CSS代码。 无需在Photoshop中工作，无需编写任何CSS样式。...
2018-09-10 09:30:53
255
原创 CSS3 Click Chart
CSS3 Click Chart是一个方便的CSS3属性参考工具，它演示了CSS3功能的示例代码和浏览器支持的详细信息。
2018-09-10 09:30:39
239
原创 Iconfont
阿里妈妈 MUX致力于创建矢量图标管理和通信平台。 设计人员将图标上传到Iconfont平台，用户可以自定义下载多种格式的图标，平台还可以将图标转换为字体，方便前端工程师调整和调用。...
2018-09-07 11:29:22
264
原创 IcoMoon
IcoMoon提供了一组矢量图标，用于创建自定义图标字体，SVG精灵和编译Web字体图标集。 浏览数千个像素以获得完美图标或导入您自己的矢量。
2018-09-07 11:23:40
137
原创 ElementUI的Table-column_render-header自定义表头
ElementUI的Table表格，官方网站上提供了很多样式，但是在日常开发中还会碰到各种情况，显然官方提供的是不能满足需求的。那么，我们就根据自己的需求对table进行改造。先丢出关于Table的官方文档的传送门，请戳这里→ http://element-cn.eleme.io/#/zh-CN/component/table 官方对Table相关的Attributes介绍的不是很详细，对于...
2018-09-07 11:03:50
5650
原创 vue移动端下拉刷新、上拉加载
由于自身的项目比较简单，只有几个H5页面，用来嵌入app中，所有没有引入移动端的UI框架，但是介于能让用户在浏览H5页面时有下拉刷新和上拉加载，有更好的用户体验，自己写组件实现。 1、下拉刷新DropDownRefresh.vue<template lang="html"> <div class="refreshMoudle" @touchstart="...
2018-09-07 10:58:53
9596
9
原创 ElementUI的Upload上传，配合七牛云储存图片
七牛云服务器的储存区域 存储区域 地域简称 上传域名 华东 z0 服务器端上传：http(s)://up.qiniup.com 华东 z0 客户端上传： http(s)://upload.qiniup.com 华北 z1 服务器端上传：http(s)://up-z1.qiniup.com 华北 z1 客户端上传：...
2018-09-07 10:48:56
1315
原创 vue-router-h5-history
vue-router的HTML5 History 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。const router = new VueRouter({ mode: 'history', routes: [...]})当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite...
2018-09-07 10:45:32
222
原创 配置webpack中externals来减少打包后vendor.js的体积
在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。webpack的外部扩展(externals)可以有效的解决。 externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle ...
2018-09-07 10:43:55
3417
1
原创 配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境
前后端分离的项目开发中，我们有开发环境、测试环境、预生产环境和生产环境。 1、开发环境下调试接口的时候，一般都会有好几个接口地址（开发服务器上的，本地的，接口开发人员的，七七八八的接口地址），要根据情况手动来切换接口地址。 2、打包时要部署项目到不同的环境，而这也需要每次都根据情况切换接口地址。虽说手动来切换地址是可以满足需求的，但是这种方式实属不是一种较为优雅的处理方式。...
2018-09-07 10:40:37
20118
5
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人