UnoCSS给了我一个不用tailwindcss的理由
如果你没有听说过 或者 ，请先 return 先去了解一下😝。 开发上：可能为你甚至你们的前端团队 节省很多写样式的时间 ，也能让你或者你们的项目 开发体验有很大提升 生产上：你们的项目打出来的包体积中的 样式代码占比将突然骤降然后趋于不变 。 书接上回 之前我写过一篇文章 ，极力推荐使用 来提升开发效率和体验，尤其是样式代码的体验会有质的提升。当然样式代码打包体积的减少也可以起到优化我们整体前端项目的作用。但是为什么有这篇文章了呢？...
前端实现文件预览 - word、pdf、excel预览
PDF预览 PDF预览用的是pdfjs dist这个pdf.js构建库 安装 最好记住自己安装的版本，因为后面解析字体的时候可能会用到 使用 1. 项目中引用 因为我安装的版本是2.6.347，所以我这里用cdn引入需要的工作包版本是2.6.347,最好是引用本地的，因为有些内网没法访问cdn的话会造成异常。 2. 上传组件 这时候要简单的写一个上传组件，给组件加上id以及change事件方便测试使用效果 3. 添加一个渲染容器 此时需...
简述 pt、rpx、px、em、rem、百分比、vh、vw的区别
简述 pt、rpx、px、em、rem、%、vh、vw的区别 设备物理像素 pt：屏幕宽、分辨率，其中每一小份就是1pt。 css 像素 px： pc 机大屏幕显示器，1px约等于0.76个物理像素 手机小屏幕：以IPhone6为标准，物理像素750，分辨率375 1px = 2pt。 px 也是一个相对单位 px 是为了平衡一个元素在PC上显示的大小与在手机上显示的大小尽量一致而制定的。 手机屏幕大小不一，差异较大，所以反而不希望一个...
面试官：”Vite为什么快？“
面试官：”Vite为什么快？“ 阅读8分钟 前面一篇文章介绍了如何做 Vite 的插件开发 ，这篇文章介绍清晰 Vite 的构建原理，为什么比 Webpack 构建速度快这么多。 1\. 一句话解释 Webpack 的构建原理 前端之所有需要 类似于 Webpack 这样的构建工具，是为了提高项目的开发效率，Webpack 通过分析js中的 require 语句，分析出当前 js 文件所有的依赖文件，通过递归的方式层层分析后，得到整个项...
写给前端同学的Nginx配置指南
nginx.conf配置 找到Nginx的安装目录下的 文件，该文件负责Nginx的基础功能配置。 配置文件概述 Nginx的主配置文件( )按以下结构组织： | 配置块 | 功能描述 | | | | | 全局块 | 与Nginx运行相关的全局设置 | | events块 | 与网络连接有关的设置 | | http块 | 代理、缓存、日志、虚拟主机等的配置 | | server块 | 虚拟主机的参数设置（一个http块可包含多个serv...
antd Table点击整行选中
前言 antd官网例子上默认是点击checkbox或者radio才会选中，这对体验上来说有点不太方便，所以需求是要做成点击Table的整行直接触发选中。 其实官方也有给了个例子： ，这是使用class写的checkbox框。 但是我项目是使用hooks的，而且是个radio框，所以就自己写了个 实现 这个其实没啥好多说的，直接看代码好了 完事
4种方法实现html 页面内锚点定位及跳转
项目中经常会出现点击跳转锚点的方法，比如给一个a标签一个href=“#锚点”，然后要跳的锚点给个id=“锚点”，这样就实现简单的跳转，但是这样在url地址栏后面都会出现一个诸如www.geekjc.com/#锚点，然后你点击给一次后退都是退回上一个选择的锚点url，这里总结4个跳转锚点的方法。 第一种方法 也是最简单的方法是锚点用标签，在href属性中写入div的id。如下： 这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果...
useMemo和useCallback的用法和区别
介绍 和 是React中优化是常用的两个Hooks。它们有一些共同点，比如都需要传递一个依赖数组，只有当依赖项发生改变时才会更新数据。但是它们的使用场景一般不同，下面将具体分析两个Hooks的异同。 useMemo 的定义如下： 其中factory是工厂函数， Dependencies是其所有依赖值的数组。 在组件初始化的时候会调用factory函数，并将返回值存储起来。当组件需要重新渲染时，react会首先依次判断每个依赖项的值是否发...
Nginx基本使用以及部署前端项目
最近学习了一下Nginx，整理了一个博客，主要参考的是狂神说的b站视频教程，文章链接如下： 一、下载、启动Nginx 1.下载Nginx 到 选择自己电脑适用的稳定版本下载，我下载的的windows版本。 <img width="756" height="640" src="../../ resources/34d32c5a540e4137a3190819a71b2db1 6bad48f7088b4b859.webp"/ 下载完，就会有...