10 2022 档案

摘要:去年写了一篇文章手写一个虚拟DOM库,彻底让你理解diff算法介绍虚拟DOM的patch过程和diff算法过程,当时使用的是双端diff算法,今年看到了Vue3使用的已经是快速diff算法,所以也想写一篇来记录一下,但是肯定已经有人写过了,所以就在想能不能有点不一样的,上次的文章主要是通过画图来一步 阅读全文
posted @ 2022-10-30 20:17 街角小林 阅读(63) 评论(0) 推荐(0) 编辑
摘要:相比Vue2,Vue3的官方文档中新增了一个在线Playground: 打开是这样的: 相当于让你可以在线编写和运行Vue单文件组件,当然这个东西也是开源的,并且发布为了一个npm包,本身是作为一个Vue组件,所以可以轻松在你的Vue项目中使用: <script setup> import { Re 阅读全文
posted @ 2022-10-25 23:03 街角小林 阅读(1148) 评论(0) 推荐(1) 编辑
摘要:本来只是好奇打包工具是如何转换ESM和CJS模块的,没想到带着这个问题阅读完编译的代码后,我的问题更多了。 目前主流的有两种模块语法,一是Node.js专用的CJS,另一种是浏览器和Node.js都支持的ESM,在ESM规范没有出来之前,Node.js的模块编写使用的都是CJS,但是现在ESM已经逐 阅读全文
posted @ 2022-10-24 21:07 街角小林 阅读(311) 评论(0) 推荐(0) 编辑
摘要:笔者开源了一个Web思维导图mind-map,数据默认是存储在localstorage里,如果想保存到本地文件,需要使用导出功能,下次打开再使用导入功能,编辑完如果又想保存到文件,那么又需要从重新导出覆盖原来的文件,不得不说,可以但不优雅,所以最近增加了直接编辑本地文件的能力,体验了一下,还是不错的 阅读全文
posted @ 2022-10-23 14:41 街角小林 阅读(129) 评论(0) 推荐(0) 编辑
摘要:本文为Varlet组件库源码主题阅读系列第十篇,也是最后一篇,读完本篇,可以了解到如何通过创建一个Vue3响应式对象就可以轻松实现国际化的需求。 Varlet组件库支持多语言切换,使用也很简单: 本文会从源码角度来看一下它是如何实现的,希望给你提供一点思路。 如上图所示,主要就是提供了三个方法,不过 阅读全文
posted @ 2022-10-20 22:49 街角小林 阅读(541) 评论(0) 推荐(0) 编辑
摘要:本文为Varlet组件库源码主题阅读系列第九篇,读完本篇,可以了解到如何使用一个div创建一个点击的水波效果。 Varlet组件库提供了一个使元素点击时生成水波扩散效果的指令: <template> <div v-ripple>点击</div> </template> 接下来就从源码角度看看它是如何 阅读全文
posted @ 2022-10-20 22:31 街角小林 阅读(49) 评论(0) 推荐(0) 编辑
摘要:本文为Varlet组件库源码主题阅读系列第八篇,读完本篇,可以了解到移动端页面如何适配各种尺寸的屏幕,包括pc端,另外如何将触摸事件转换成鼠标事件。 移动端适配 开发移动端页面,我们通常都会按照一个固定宽度的设计稿来做,但是实际上的手机屏幕尺寸五花八门,如果不进行适配的话会比较影响使用体验。 Var 阅读全文
posted @ 2022-10-19 21:35 街角小林 阅读(368) 评论(0) 推荐(0) 编辑
摘要:本文为Varlet组件库源码主题阅读系列第七篇,读完本篇,可以了解到如何通过unplugin-vue-components插件来为你的组件库实现按需引入。 手动引入 前面的文章中我们介绍过Varlet组件库的打包流程,最后会打包成几种格式,其中module和commonjs格式都不会把所有组件的代码 阅读全文
posted @ 2022-10-19 21:23 街角小林 阅读(570) 评论(0) 推荐(0) 编辑
摘要:本文为Varlet组件库源码主题阅读系列第六篇,Varlet支持自定义主题及暗黑模式,本篇文章我们来详细看一下这两者的实现。 主题定制 Varlet是通过css变量来组织样式的,什么是css变量呢,其实很简单,首先声明自定义的css属性,随便声明在哪个元素上都可以,不过只有该元素的后代才能使用,所以 阅读全文
posted @ 2022-10-19 21:12 街角小林 阅读(164) 评论(0) 推荐(0) 编辑
摘要:本文为Varlet组件库源码主题阅读系列第五篇,读完本文你可以了解到如何通过编写一个Vite插件来支持使用md文件直接作为路由组件。 之前文档站点的搭建里我们介绍了路由的动态生成逻辑,其中说到了文档是使用Markdown格式编写的,并且还直接在路由文件里使用md文件作为路由组件: 路由就是路径到组件 阅读全文
posted @ 2022-10-16 20:33 街角小林 阅读(153) 评论(0) 推荐(0) 编辑
摘要:本文为Varlet组件库源码主题阅读系列第四篇,读完本篇,可以了解到如何使用Vite的Api接口来启动服务、如何动态生成多语言的页面路由。 Varlet的文档网站其实就是一个Vue项目,整体分成两个单独的页面:文档页面及手机预览页面。 网站源代码文件默认是放在varlet-cli目录下,也就是脚手架 阅读全文
posted @ 2022-10-10 22:52 街角小林 阅读(228) 评论(0) 推荐(0) 编辑
摘要:本文为Varlet组件库源码主题阅读系列第三篇,读完本篇,你可以了解到如何将svg图标转换成字体图标文件,以及如何设计一个简洁的Vue图标组件。 Varlet提供了一些常用的图标,图标都来自 Material Design Icon。 转换SVG为字体图标 图标原文件是svg格式的,但最后是以字体图 阅读全文
posted @ 2022-10-09 22:38 街角小林 阅读(106) 评论(0) 推荐(0) 编辑
摘要:本文为Varlet组件库源码主题阅读系列第二篇,读完本篇,你可以了解到如何将一个Vue3组件库打包成各种格式 上一篇里提到了启动服务前会先进行一下组件库的打包,运行的命令为: varlet-cli compile 显然是varlet-cli包提供的一个命令: 处理函数为compile,接下来我们详细 阅读全文
posted @ 2022-10-08 21:51 街角小林 阅读(2262) 评论(0) 推荐(0) 编辑
摘要:本文为Varlet组件库源码主题阅读系列第一篇 Vue开源的组件库有很多,基本各个大厂都会做一个,所以作为个人再重复造轮子其实意义也不是很大,但是笔者对于如何设计一个Vue组件库还是挺感兴趣的。 不同的组件库架构肯定有所不同,不过大体思路应该都差不多,笔者在众多组件库中挑选了Varlet 来进行剖析 阅读全文
posted @ 2022-10-07 15:19 街角小林 阅读(145) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示