摘要:
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格式都不会把所有组件的代码 阅读全文