街角前端铺

摘要： Vue Demi是什么 如果你想开发一个同时支持Vue2和Vue3的库可能想到以下两种方式： 1.创建两个分支，分别支持Vue2和Vue3 2.只使用Vue2和Vue3都支持的API 这两种方式都有缺点，第一种很麻烦，第二种无法使用Vue3新增的组合式 API，其实现在Vue2.7+版本已经内置支持 阅读全文

摘要： 假设我们正在开发一个可视化拖拽的搭建平台，可以拖拽生成工作台或可视化大屏，或者直接就是开发一个大屏，首先必须要考虑的一个问题就是页面如何适应屏幕，因为我们在搭建或开发时一般都会基于一个固定的宽高，但是实际的屏幕可能大小不一，接下来我们就尝试几种简单且常见的方案，并简单分析一下利弊。 demo 首先写 阅读全文

摘要： 去年写了一篇文章手写一个虚拟DOM库，彻底让你理解diff算法介绍虚拟DOM的patch过程和diff算法过程，当时使用的是双端diff算法，今年看到了Vue3使用的已经是快速diff算法，所以也想写一篇来记录一下，但是肯定已经有人写过了，所以就在想能不能有点不一样的，上次的文章主要是通过画图来一步 阅读全文

摘要： 相比Vue2，Vue3的官方文档中新增了一个在线Playground： 打开是这样的： 相当于让你可以在线编写和运行Vue单文件组件，当然这个东西也是开源的，并且发布为了一个npm包，本身是作为一个Vue组件，所以可以轻松在你的Vue项目中使用： <script setup> import { Re 阅读全文

摘要： 本来只是好奇打包工具是如何转换ESM和CJS模块的，没想到带着这个问题阅读完编译的代码后，我的问题更多了。 目前主流的有两种模块语法，一是Node.js专用的CJS，另一种是浏览器和Node.js都支持的ESM，在ESM规范没有出来之前，Node.js的模块编写使用的都是CJS，但是现在ESM已经逐 阅读全文

摘要： 笔者开源了一个Web思维导图mind-map，数据默认是存储在localstorage里，如果想保存到本地文件，需要使用导出功能，下次打开再使用导入功能，编辑完如果又想保存到文件，那么又需要从重新导出覆盖原来的文件，不得不说，可以但不优雅，所以最近增加了直接编辑本地文件的能力，体验了一下，还是不错的 阅读全文

摘要： 本文为Varlet组件库源码主题阅读系列第十篇，也是最后一篇，读完本篇，可以了解到如何通过创建一个Vue3响应式对象就可以轻松实现国际化的需求。 Varlet组件库支持多语言切换，使用也很简单： 本文会从源码角度来看一下它是如何实现的，希望给你提供一点思路。 如上图所示，主要就是提供了三个方法，不过 阅读全文

摘要： 本文为Varlet组件库源码主题阅读系列第九篇，读完本篇，可以了解到如何使用一个div创建一个点击的水波效果。 Varlet组件库提供了一个使元素点击时生成水波扩散效果的指令： <template> <div v-ripple>点击</div> </template> 接下来就从源码角度看看它是如何 阅读全文

摘要： 本文为Varlet组件库源码主题阅读系列第八篇，读完本篇，可以了解到移动端页面如何适配各种尺寸的屏幕，包括pc端，另外如何将触摸事件转换成鼠标事件。 移动端适配 开发移动端页面，我们通常都会按照一个固定宽度的设计稿来做，但是实际上的手机屏幕尺寸五花八门，如果不进行适配的话会比较影响使用体验。 Var 阅读全文

摘要： 本文为Varlet组件库源码主题阅读系列第七篇，读完本篇，可以了解到如何通过unplugin-vue-components插件来为你的组件库实现按需引入。 手动引入 前面的文章中我们介绍过Varlet组件库的打包流程，最后会打包成几种格式，其中module和commonjs格式都不会把所有组件的代码 阅读全文