Vue
关注
分享
扫一扫
文章平均质量分 83
zgh0711
努力让自己变得更有价值
展开
-
H5 项目快速开发模版 vue-template-mobile
本人从事前端开发工作已有四年，这期间做的大部分都是移动端 H5 项目，这几年来大大小小的 H5 项目也做了有十几个了。对于移动端 H5 项目来说，有些功能和配置其实是通用的，基本上每个项目都会用到，比如说：微信授权及分享、UI 组件库、各种小组件等。基于我平时比较喜欢总结以及为了以后开发 H5 项目省事的目的，就有了这个项目（主要就是为了偷懒，，，）项目地址：https://github.com/zgh0711/vue-template-mobile这个项目是啥Vue 移动端新项目模板，封装了 H5原创 2020-09-23 22:55:20 · 3528 阅读 · 1 评论 -
VUE 爬坑之旅 -- axios 封装
网络请求是每个项目都需要具备的功能，现在的 vue 项目中基本都是使用的 axios 作为网络请求库，老规矩，先上一份 axios中文文档 axios 本身已经封装的很好了，直接使用也是没问题的，为了在实际开发中更好更方便的使用，需要对它进行一下二次封装。二次封装要达到的效果： 1. 请求开始时，弹出加载动画，如超时，弹出提示并结束动画 2. 正常拿到请求结果后结束动画， 3. 如请...原创 2018-05-24 19:11:33 · 4136 阅读 · 2 评论 -
VUE 爬坑之旅 -- 在 VUE 项目中使用 ECharts 画 K 线图和面积图，并且可切换
现在的项目中需要做一个K线图的功能，花了几天时间查资料，读文档，总算是基本搞定了，下面把这过程中一些需要注意的点记下来，以备不时之需。需要达到的效果如下： 说到做图表，现在的成熟的解决方案就是百度的 ECharts 了，功能强大齐全，文档详细，用的人多，碰到问题也好解决。老规矩，先上文档 ECharts 文档，文档内容很多，全部看一遍得花很多时间，，，看的我头晕，，，上周，饿了么团队...原创 2018-06-07 11:55:23 · 12022 阅读 · 6 评论 -
VUE 爬坑之旅 -- 封装一个简单的获取本地图片并压缩上传的组件
平时项目开发中，获取本地图片并压缩上传是一个很常见的需求，最典型的就是修改用户头像功能，今天就来封装一个可以到处通过的组件。首先分析需求，要达到什么效果呢？点击后打开文件选择器，选择文件对获取的图片文件压缩前端能够预览获取到的图片将压缩后的图片上传给服务器分析下来，大致就是上面的几点，那么再深入分析一下，这个图片预览上传的功能可能很多地方都需要用，并不只限于修改头像这一个地方...原创 2018-06-01 15:52:13 · 3531 阅读 · 6 评论 -
VUE 爬坑之旅 -- vue 项目中将简体转换为繁体
今天接到一个需求说要将现在项目里面的简体文字全部转换为繁体的，这需求手动去干肯定不现实，必须得找一个省时省力的办法。Google 一圈下来，发现大部分解决方案都是好几年前 JQuery 时代的，是不适合现在 vue 项目的。那么有没有 vue 项目中好用的解决方案呢？在又找了一圈之后，终于在 github 的一个角落里面发现这么一个 https://github.com/maoxiaoqu...原创 2018-07-30 18:41:23 · 5736 阅读 · 5 评论 -
Vue 爬坑之旅 -- Mint-UI 中使用 lazyload 做图片懒加载以及结合 OSS 做图片加载优化
博客已经有段时间没有更新文章了，有点惭愧，，，因为跳到了新公司，接手他们原先的项目，老代码着实是让人不敢恭维，没有开发规范就算了，还到处都是逻辑漏洞，每次我改个什么东西基本都能发现一些其它的问题，简直是无力吐槽了。So，接手了项目之后，要做的事情非常多，也一直没有抽出时间来总结工作中碰到的问题，今天总算是有点空余时间，赶紧撸一篇。现在的互联网产品都离不开图片，几乎每个产品里面，图片都会有一定...原创 2018-11-16 14:33:39 · 3886 阅读 · 0 评论 -
Vue 爬坑之旅 -- 解决 IOS 上滚动穿透以及由此引起的坑和爬坑过程
以前做 Android 的时候觉得 Android 适配好烦人，各种厂商，各种版本，各种机型都需要做适配，烦的一笔。现在做 H5 了，也还是要面对适配的问题，不过现在是反过来了，写好的代码在 Android 上跑的好好的，但是到了 IOS 上可能会出现各种问题，现在做适配基本都是针对 iOS 来做的了。IOS 上要做的适配有很多，比如 1px ，图片，fixed布局，点击延迟，滚动穿透等等，各种...原创 2018-11-29 16:46:35 · 5499 阅读 · 2 评论 -
Vue 爬坑之旅 -- 生成分享二维码和合成分享海报的方法及踩坑历程
最近的项目开发中有这样一个需求：每个用户有一个邀请链接，通过这个邀请链接邀请其他人注册要将邀请链接做成一个二维码，并放到一个海报背景上分享邀请海报给被邀请人，扫描二维码注册需求比较明确，这篇文章就来说下需求里面的第二步是如何实现的以及实现过程中需要注意的一些问题。如何生成二维码如今的社会中，二维码随处可见，其实二维码就是将一段文字信息用特定的算法规则计算之后以图片的形式展示出来。基...原创 2019-03-06 10:28:51 · 6484 阅读 · 1 评论 -
Vue 爬坑之旅 -- history 路由模式下微信分享爬坑总结
不要在路由钩子里面做签名，url 会不对wxShare 封装微信分享JSSDK-invalid signature签名错误的解决方案微信分享链接出现config:invalid signature错误的解决方法...原创 2019-04-11 17:47:15 · 3315 阅读 · 4 评论 -
Vue 爬坑之旅 -- 微信网页授权
现在的 H5 开发，微信授权和微信分享基本是必备功能，昨天将微信分享的相关功能和踩坑过程做了一个总结，今天就来说下微信授权的功能具体到 vue 项目中该要怎么做。Vue 爬坑之旅 – history 路由模式下微信分享爬坑总结准备工作在开始码代码之前需要先做一些准备工作，其实也是做微信分享需要做的准备工作，申请公众号，绑定域名，申请 AppId 等。这些事情做完之后还需要做的事情就是先通读一...原创 2019-04-12 10:35:32 · 7865 阅读 · 5 评论 -
Vue 爬坑之旅 -- keepAlive 与 vue-router 结合使用实现页面缓存及记住滚动位置功能的实现及几个需要注意的点
要注意页面布局，不要限制页面滚动位置vue中 进入详情页记住滚动位置（keep-alive）vue缓存页面返回到指定滚动位置移动端基于vue-router的滚动位置记录(keep-alive)vue-router在返回时返回到上次滚动位置组件缓存问题另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新...原创 2019-04-03 11:04:45 · 9179 阅读 · 4 评论 -
Vue 爬坑之旅 -- 用自定义指令解决 IOS 12 中键盘收起后页面底部有留白的问题
在 IOS 12 的系统中，在输入框中输入完内容，当点击键盘上的完成按钮时，会发现页面底部会有一大段区域变成了白色的，高度就是原来弹起的键盘的高度，这时候如果将页面上下滑动下，会发现这块空白区域又会消失，页面也恢复了正常。当初第一次碰到这个问题时，真的是一脸懵逼，这特么是什么情况。多方查找后发现原来这不是个案，很多人都碰到过，而且也有各种各样的解决方案。看了很多文章后发现，解决思路基本都是一样...原创 2019-04-26 17:21:08 · 2684 阅读 · 3 评论 -
Vue 爬坑之旅 -- 动态合成分享海报时需要注意的几个问题
前段时间有写过一篇生成分享二维码然后在和背景图一起合成成为一张海报的文章，Vue 爬坑之旅 – 生成分享二维码和合成分享海报的方法及踩坑历程，当时这个功能是用 qrcode 先生成二维码然后将二维码用定位的方式放在背景图片上面，然后使用 html2canvas 来将二维码和背景图合成为一张分享海报。在上周又接到了一个差不多的需求，也是要生成一张分享海报，这次的不同点在于出了二维码之外，还有其他的...原创 2019-05-29 16:56:56 · 1121 阅读 · 0 评论 -
Vue 爬坑之旅 -- 双层 v-for 中使用 v-model 绑定 input 时碰到的坑
双层v-for中使用 v-model时碰到的坑处理数据时不能直接传对象，要么用深拷贝，要么转为json再处理原创 2019-07-04 11:51:44 · 6925 阅读 · 2 评论 -
Vue 爬坑之旅 -- 给页面加上背景音乐并直接播放
在很多的 H5 推广或者宣传页面都有背景音乐，并且基本上进入页面后背景音乐都是自动播放的，最近我也接到了这么一个需求（虽然我觉得这个需求很 Low，没什么必要，但架不住 PM 的硬性要求）。要想在页面上播放背景音乐其实很简单，只需要一个 audio 标签即可，基本用法如下：<audio ref="audio" src="https://img.youpenglai.com/penglai...原创 2020-08-29 19:34:58 · 4590 阅读 · 2 评论 -
VUE 爬坑之旅 -- 全局路由拦截，判断及保存登录状态
在实际的商业项目中，基本都会有登录功能，然后有些页面是登录之后才能查看的，没有登录的话会先跳转到登录页，登录成功再返回并刷新数据，几乎所有的应用都是采用的这一套逻辑，那么这一套逻辑在我们的 vue 项目中要怎么实现呢？vue 项目中，页面之间的跳转是通过路由实现，要想实现上述的逻辑就必须得在路由上面下文章，在官方路由 vue-router 中，有导航守卫这么个东西，还不知道的先看下 官方文档...原创 2018-05-24 17:53:38 · 10412 阅读 · 1 评论 -
VUE 爬坑之旅 -- 用 ES6 语法写一个工具类，并全局引用
在我前面的有一篇文章里有说过怎么引入外部的 JS 文件，详情见 VUE 爬坑之旅– 如何对公共JS，CSS进行统一管理，全局调用 。这里所说的外部 JS 文件指的是用 ES6 之前的老语法编写的各种 JS 代码，这种 JS 文件可以用我上面那篇文章里面的方法引入，使用方法跟以前一样。但是现在是新的时代，还是用以前的老东西未免有点过时了，而且很多以前的那种 JS 文件其实都是要依赖 JQuery...原创 2018-05-24 12:03:57 · 11577 阅读 · 0 评论 -
VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用（二）
上篇 从零开始一步一步构建 VUE 单页应用（一） 对单页应用做了简单的介绍并创建了一个单页应用的模版。这篇就先来看看这个项目的文件结构，然后再看看要怎么修改才能实现我们自己的页面。原创 2017-09-20 18:31:50 · 7250 阅读 · 7 评论 -
VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用（三）
前二篇介绍了如何创建一个基础的单页应用模版，以及简单分析了下整个模版项目，通过分析之后知道后面的工作应该从哪入手开始。原创 2017-09-21 10:41:18 · 5137 阅读 · 5 评论 -
VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用（一）
最近公司技术 Leader 说要以后要使用 VUE 来构建单页应用，让我先研究下怎么搞。既然接到了任务那就撸起袖子开干吧，由于之前有过使用 VUE 做页面数据绑定，对 VUE 这东西还是很有好感的。于是乎 google 了一堆先行者的文章，看了一圈下来有了一个基本的概念。在我看来，单页应用就是把网页做的跟原生 APP 差不多的形式，没有传统网页那样的有明显的页面跳转，页面切换比较流畅顺滑，用户体验较原创 2017-09-20 16:48:37 · 10500 阅读 · 2 评论 -
多层 VUE 循环中，在子循环中拿到父循环的 index
VUE 中可以实现多层循环，有的时候需要在当前循环中拿到上一层循环中的某个字段值或者 index，从而去进行判断或者是干别的事情，可以通过如下方法先拿到父循环的 index，然后通过 index 去拿其他想要的字段值： N层v-for 里面， 当前层的 index 可以通过 $index 得到 ，上一层的通过 $parent.$index, 在向上也是如此，以此类推！！！原创 2017-07-31 14:35:55 · 13344 阅读 · 2 评论 -
VUE 爬坑之旅-- v-for，v-on:click 使用需要注意的地方
今天在写一个页面的时候，需要在一个 v-for 循环里面给每个 item 绑定一个点击事件，在这个事件中我需要拿到所点击 item 里面的数据和它的 index。原创 2017-10-27 18:21:41 · 21303 阅读 · 7 评论 -
VUE 爬坑之旅-- 如何对公共JS，CSS进行统一管理，全局调用
vue 中，将页面分为了各个组件，我们写好组件，就可以将这个组件运用到其他各个页面中，每个组件都是一个 .vue 文件，里面有各自的 Html 结构，样式表和 JS 代码。原创 2017-11-30 15:29:01 · 12659 阅读 · 0 评论 -
VUE 爬坑之旅-- route-link 的样式以及需要注意的地方
是 vue-route 中的一个组件，它的作用就是相当于 a 标签一样的给路由做导航，事实上它也确实是默认被渲染为 a 标签。原创 2017-11-30 16:09:40 · 14522 阅读 · 0 评论 -
VUE 爬坑之旅-- Mint-ui 按需引入
今天开项目，决定使用 Vue 来进行开发，遂开始寻找 Vue 相关的 Ui 组件库，找了一圈看下来，Github 上 star 数最高的二个分别为 Mint-ui 和 Vux，分别扫了他们的二维码体验了下，发现 Vux 在界面切换的时候不流畅，所以就剩下 Mint-ui 这一个选择了。下面开始今天的爬坑之旅。坑一：npm 5.8.0在新建项目的时候发现 npm 有新的版本升级，就顺手升级了...原创 2018-03-26 16:41:45 · 10097 阅读 · 1 评论 -
Vue 爬坑之旅--父组件传入图片路径和路由给子组件
在实际开发中，经常会碰到一种情形：*父组件中有好几个列表形式的子组件，要把这些子组件正确的渲染出来，就必须从父组件中传入数据给子组件，让子组件通过 v-for 去渲染。 有的时候，这些数据里面可能会包含有静态的图片路径，还可能会有路由（最典型的例子就是APP首页里面的导航图标，需要显示出一个图片，点击图片需要跳转到另外的页面）* 比如下面这种 现在的需求是这几个导航图标都是本地的静态...原创 2018-03-27 14:20:19 · 16343 阅读 · 1 评论 -
Vue 爬坑之旅--嵌套路由默认选中第一个子路由，并且主路由和子路由都处于激活状态
在实际开发中，嵌套路由经常会用到，基本用法也很简单，今天要说的不是嵌套路由怎么用，而是在用的过程中发现的二点小细节的处理。嵌套路由中默认选中第一个子路由在一个这样的界面中，底部的五个 tab 显然应该是五个路由，现在在首页这个路由下面又有三个 tab，那么这三个 tab 就应该使用子路由来实现，路由代码如下： { path: '/home',...原创 2018-03-27 17:33:20 · 20570 阅读 · 6 评论 -
VUE 爬坑之旅-- 用 Vuex 状态管理来控制底部导航栏的显示隐藏
在做 APP 类项目开发的时候，有一个很常见的需求就是 APP 通常有一个底部导航，点击导航的不同 tab 要切换到不同的界面，在这些通过导航切过去的界面上是需要显示底部导航来让用户方便操作的。 除了这些带导航的页面之外，还有一些独立的页面是不需要底部导航的，比如说注册，登录等页面。那么怎样能够比较方便的控制底部导航的显示和隐藏呢？这就可以用到 Vue 的状态管理插件 Vuex 了，关于 Vue...原创 2018-03-29 11:43:37 · 10525 阅读 · 6 评论 -
VUE 爬坑之旅--class 动态绑定的几种写法
在 vue 中，class 动态绑定是一个很常见的需求，平时的使用频率也很高，今天就来说说 class 绑定的几种写法。首先，放出镇楼神器：官方文档文档里面第一个说的是对象语法，也就是在 data 对象里面定义一个属性，然后在 :class 中引入这个属性，这样当属性变化的时候，class 就会相应的变化，而且还可以使用计算属性来处理复杂的逻辑。 特性是很好，但是我在实际项目开发的时候基...原创 2018-05-02 15:31:47 · 6845 阅读 · 2 评论 -
VUE 爬坑之旅-- 路由传参的几种方式及注意点
在 VUE 项目中，页面之间跳转都需要使用路由，而路由在跳转的时候需要传递各种参数也是一个很常见的需求，那么 VUE 中路由传参有几种方式呢？方式一：直接调用$router.push 实现携带参数的跳转 showDetail(id) { this.$router.push({ path: `/detail/${id}`, })...原创 2018-05-09 15:32:23 · 9495 阅读 · 0 评论 -
VUE 爬坑之旅-- 给 v-html 渲染出的内容添加样式
在 vue 中，如果要渲染一段 html 内容，可以使用 v-html 标签，渲染出来的内容会带有原来的页面标签和样式，如果想要修改内容里面的样式要怎么做呢？有的人会说，这还不简单，直接在 style 里面写相应的样式不就完了吗，实际实践过会发现，根本就不行，如果像原来那样直接写的话是根本不起作用的，而且进入调试模式会发现，在每个 class 里面，vue 都给加上了 data-xxxxx 的...原创 2018-05-02 20:07:07 · 9390 阅读 · 4 评论 -
VUE 爬坑之旅--优雅的使用 keep-alive
vue 项目中，路由缓存是一个常见的需求和功能，官方文档里面有说到，如果要保存某个组件的状态或避免重新渲染，可以使用 keep-alive 组件，文档里面说的比较简单，就只是用 keep-alive 组件包裹某个或几个组件，这样做的话功能是可以实现，但未免不够优雅（如果我有很多组件都需要做缓存处理，或者某个需要缓存的组件在很多地方都要用到，难道需要在每个使用的地方都写上 keep-alive 吗？...原创 2018-05-02 21:15:18 · 1268 阅读 · 0 评论 -
VUE 爬坑之旅-- eventBus 事件总线的基本使用和重复触发事件问题的解决
在单页应用中，在 A 页面中触发事件，然后在 B 页面中对这个事件进行响应是一个很常见的需求，那么当有这种需求的时候要怎么实现呢。有两种方案可以实现： 1. 使用 vuex 状态管理，当触发事件时，改变 vuex 中的状态，然后在需要响应事件的地方用 watch 监听这个状态，当状态改变时，响应事件。 2. 使用 eventBus 事件总线，当触发事件时，发送一个通知出去，在需要响应的地方接收...原创 2018-05-11 17:53:42 · 15091 阅读 · 2 评论 -
VUE 爬坑之旅-- 从零开始一步一步构建 VUE 单页应用（四）
在前面的文章中我们把一个简单的单页应用搭建起来了，现在我们就来给它加点料。原创 2017-09-27 17:53:26 · 2690 阅读 · 2 评论