街角前端铺

摘要： 本文为Varlet组件库源码主题阅读系列第六篇，Varlet支持自定义主题及暗黑模式，本篇文章我们来详细看一下这两者的实现。 主题定制 Varlet是通过css变量来组织样式的，什么是css变量呢，其实很简单，首先声明自定义的css属性，随便声明在哪个元素上都可以，不过只有该元素的后代才能使用，所以 阅读全文

摘要： 本文为Varlet组件库源码主题阅读系列第五篇，读完本文你可以了解到如何通过编写一个Vite插件来支持使用md文件直接作为路由组件。 之前文档站点的搭建里我们介绍了路由的动态生成逻辑，其中说到了文档是使用Markdown格式编写的，并且还直接在路由文件里使用md文件作为路由组件： 路由就是路径到组件 阅读全文

摘要： 本文为Varlet组件库源码主题阅读系列第四篇，读完本篇，可以了解到如何使用Vite的Api接口来启动服务、如何动态生成多语言的页面路由。 Varlet的文档网站其实就是一个Vue项目，整体分成两个单独的页面：文档页面及手机预览页面。 网站源代码文件默认是放在varlet-cli目录下，也就是脚手架 阅读全文

摘要： 本文为Varlet组件库源码主题阅读系列第三篇，读完本篇，你可以了解到如何将svg图标转换成字体图标文件，以及如何设计一个简洁的Vue图标组件。 Varlet提供了一些常用的图标，图标都来自 Material Design Icon。 转换SVG为字体图标 图标原文件是svg格式的，但最后是以字体图 阅读全文

摘要： 本文为Varlet组件库源码主题阅读系列第二篇，读完本篇，你可以了解到如何将一个Vue3组件库打包成各种格式 上一篇里提到了启动服务前会先进行一下组件库的打包，运行的命令为： varlet-cli compile 显然是varlet-cli包提供的一个命令： 处理函数为compile，接下来我们详细 阅读全文

摘要： 本文为Varlet组件库源码主题阅读系列第一篇 Vue开源的组件库有很多，基本各个大厂都会做一个，所以作为个人再重复造轮子其实意义也不是很大，但是笔者对于如何设计一个Vue组件库还是挺感兴趣的。 不同的组件库架构肯定有所不同，不过大体思路应该都差不多，笔者在众多组件库中挑选了Varlet 来进行剖析 阅读全文

摘要： 上一篇Vite入门从手写一个乞丐版的Vite开始（上）我们已经成功的将页面渲染出来了，这一篇我们来简单的实现一下热更新的功能。 所谓热更新就是修改了文件，不用刷新页面，页面的某个部分就自动更新了，听着似乎挺简单的，但是要实现一个很完善的热更新还是很复杂的，要考虑的情况很多，所以本文只会实现一个最基础 阅读全文

摘要： Vite是什么就不用笔者多说了，用过Vue的朋友肯定都知道，本文会通过手写一个非常简单的乞丐版Vite来了解一下Vite的基本实现原理，参考的是Vite最早的版本（vite-1.0.0-rc.5版本，Vue版本为3.0.0-rc.10）实现的，现在已经是3.x的版本了，为什么不直接参考最新的版本呢， 阅读全文

摘要： 上一篇我做了一个在线白板！给大家介绍了一下矩形的绘制、选中、拖动、旋转、伸缩，以及放大缩小、网格模式、导出图片等功能，本文继续为各位介绍一下箭头的绘制、自由书写、文字的绘制，以及如何按比例缩放文字图片等这些需要固定长宽比例的图形、如何缩放自由书写折线这些由多个点构成的元素。 箭头的绘制 箭头其实就是 阅读全文

摘要： 笔者是一个平平无奇的前端打工人，没有参与过啥热门开源项目的共建，所以每次说自己热爱开源都很心虚，充其量就是热爱使用开源项目，不过这两年来也陆续做了几个小项目，虽然只有时不时的来几个star，不过也给我安静的github平添了几分人气，本文就给大家推荐一下笔者的开源项目，如果觉得可以欢迎给个关注~ 豆 阅读全文