Vue项目开发经验总结

截止发文时间，vite正式版已经发布快2年时间了，vue3也发布到3.2版本了，它的周边设施基本上已经齐活了。也是时候再次重构下我那个vue3.0的开源项目了。 本篇文章就记录下我的重构过程。

现在越来越多的笔记本电脑内置了指纹识别，用于快速从锁屏进入桌面，一些客户端的软件也支持通过指纹来认证用户身份。 前几天我在想，既然客户端软件能调用指纹设备，web端应该也可以调用，经过一番折腾后，终于实现了这个功能，并应用在了我的开源项目中。 本文就跟大家分享下我的实现思路以及…

昨天，在我的开源项目chat-system中查看聊天记录时，发现消息中如果有图片滚动条的位置就会算错，导致最后一条消息定位不准确。 经过一番排查后，终于解决了这个问题，本文就跟大家分享下我的解决方案与思路，欢迎各位感兴趣的开发者阅读本文。 如下图所示，我们点开一个聊天窗口，最后…

在我的开源项目中有一个组件是用来发送消息和展示消息的，这个组件的逻辑很复杂也是我整个项目的灵魂所在，单文件代码有1100多行。我每次用webstorm编辑这个文件时，电脑cpu温度都会飙升并伴随着卡顿。 就在前几天我终于忍不住了，意识到了Vue2的optionsAPI的缺陷，决…

浏览器里右键时会有一个默认的菜单，在我的开源项目中正好有自定义右键菜单的需求，在npm库找了下与之相关的包，发现都是以组件形式实现的，感觉那种做法太过繁琐。 于是，我就想着能不能像vue的内置指令那样，绑定到元素上，在这个元素上右键就能出现右键菜单，这样做就方便很多了。 看了下…

2020年9月18日，vue3正式版发布了，前几天把文档整体读了一遍，感触很深，可以解决我项目中的一些痛点，于是就决定重构之前那个vue2的开源项目。 本篇文章就记录下重构vue2项目的过程，欢迎各位感兴趣的开发者阅读本文。 本来打算使用vite + vue3 + VueRou…

layui官方提供了npm的安装方法，我司使用的是layui正版授权的layim，今天在折腾时发现，从npm仓库获取layui，里面自带了layim，大家可以去白嫖一波，不过大家需要注意版权问题(如下图所示,layui官网进行了声明)。 商用项目的话还是建议大家获取正版授权，毕…

在写公司项目时，遇到了一个需求: 用户登录后，如果这个用户有供应商身份，则在个人资料下显示切换按钮，点击切换后小程序底部的tabbar要变成其他的，接下来就跟大家分享下我的实现方式，欢迎各位感兴趣的开发者阅读本文。 刚开始求助别人时，他们说我这个需求需要通过自定义tabbar实…

本文将跟各位开发者分享一种解决方案，欢迎各位感兴趣的开发者阅读本文。

在项目中点击小图查看大图，对大图进行旋转、放大、缩小是个很常见的需求，今天就跟大家分享下v-viewer插件如何在vue项目中使用。先看下最终实现的效果(图片较大，点击链接进行查看)

文章中的配置，项目基于Vue CLI 3.0搭建，版本大于等于3.0不会有问题，其他环境版本请绕道😂。

监听剪切板粘贴事件，读取剪切板中的图片文件，转成base64通过img标签显示出来，此时可能会存在剪切板中图片过大，产生上传速度慢问题，接下来就跟大家分享下如何将base64图片进行压缩。先跟大家展示下最终实现的效果：

当div设置contenteditable属性实现可编辑时，可以调用document.execCommand方法向可编辑div中插入内容。如果可编辑div没有点击或者失去了焦点，都无法实现将元素插入到可编辑div中，接下来就跟大家分享下，如何让div获取焦点，解决这一BUG。先…

在做头像上传功能时，为了防止用户多次点击，通常会在上传时添加一个遮罩，提示用户：图片正在上传中，上传完毕后，关闭这个遮罩层，本来想找个UI框架引入进来，使用框架提供的弹层，找了很多没找到满意的，干脆自己做一个吧😂。接下来就跟大家分享下如何制作一个插件，先跟大家展示下最终实现的…

我们在使用QQ进行聊天时，从别的地方Ctrl+C一张图片，然后在聊天窗口Ctrl+V，QQ就会将你刚才复制的图片粘贴到即将发送的消息容器里，按下Enter键，这张图片将会发送出去。接下来跟各位开发者分享下这项功能在Vue中如何来实现。先跟大家展示下最终实现的效果。在线体验地址 …

曾几何时，大多数使用QQ的人，脑子里都想过这样一件事：这东西好厉害，啥时候我也能实现一个就好了。昔日，腾讯彻底关闭了web版本的QQ。今日，我决定用Vue来实现它，当然这是一个很庞大的项目，目前我只完成了一个雏形，实现了群聊功能和移动端的适配(简陋适配)。 我决定写这个项目的主…

写JQuery项目时，使用websocket很简单，不用去考虑模块化，组件之间的访问问题，面向文档编程即可，在Vue项目中使用时，远远没有想象中的那么简单，需要考虑很多场景，本篇文章将与各位开发者分享下vue-native-websocket库的使用以及配置，用其实现群聊功能。…

前言需求场景如下：在Vue项目中，调用的接口，需要用户登录后通过token进行访问，此时登录的相关页面部署在同域名的不同路径里，无法在当前项目访问到，我们要如何拿到这个登陆页面返回的token？接下来

本文讲解下axios在项目中的一些封装与应用，欢迎各位感兴趣的开发者阅读本文。 接下来回到本文的重点，如何去合理的配置它以提高开发效率以及可维护性。 封装好的axios配置代码如下，将下述代码放进axios.js文件中。 完成上述步骤后，axios的核心配置就完成了，我们来看看…

需求场景如下:实现了消息发送，如果容器内消息过多，会出现滚动条，最新的消息位于最底部，不能及时出现在可视区域内，此时就需要在渲染列表后，将滚动条的位置定位到最底部。先来看看最终实现的效果 使用setTimeout()，将DOM操作改为异步(我的解决方案)。