React 项目性能提升:如何避免路由懒加载和图片懒加载导致的慢速问题 发表于 2025-01-24 更新于 2025-03-09 分类于 thinks 前言 在日常的React项目开发中,这些错误会让你的项目变慢。实际上如果你熟悉Vue项目的开发话,这些道理是相同的。这边文章分析的是路由懒加载和图片懒加载。 阅读全文 »
React 性能优化:如何避免乱用缓存带来的问题 发表于 2025-01-24 更新于 2025-03-09 分类于 thinks 前言 在之前的文章中,我列举了一些React常用的Hooks。其中一些Hooks 如React.memo,useMemo等hooks可以缓存结果,但是这不代表我们可以无脑的缓存,因为内存的开销也是很昂贵的。 阅读全文 »
Next.js 14 开发环境搭建指南:从安装到项目结构解析 发表于 2025-01-24 更新于 2025-03-09 分类于 thinks 什么是Next.js Next.js 是一个用于构建全栈 Web 应用程序的 React 框架。您可以使用 React Components 来构建用户界面,并使用 Next.js 来实现附加功能和优化。 安装项目 请确保你的操作系统上安装了Node.js 18.17 或更高版本。 我们采用官网上的 阅读全文 »
如何在 NestJS 中配置 PostgreSQL 数据库与实现用户密码加密 发表于 2025-01-24 更新于 2025-03-09 分类于 share 前言 最近在学习NestJS,一个基于Express开发的Node框架,他更加前端适合编写后端需求。 对接Postpresql数据库 安装如下插件 pnpm install @nestjs/typeorm typeorm pg 编辑main.ts 文件内容,增加数据库配置 import { Mod 阅读全文 »
VSCode 快捷代码片段:提升前端开发效率的必备技巧 发表于 2025-01-24 更新于 2025-03-09 分类于 share 前言 在前端开发中,尤其是使用 Vue 或者 React 框架时,我们经常需要新建页面,并且编写一些重复性很高的代码片段。本文将介绍如何利用 VSCode 内置的代码片段功能,快速生成这些重复且繁琐的代码。 VSCode 内置的 snippets VSCode 内置了一些常用语言的 snippets 阅读全文 »
使用 CSS 混合模式实现动态反差色效果 发表于 2025-01-24 更新于 2025-03-09 分类于 share 前言 在前端开发中,我们经常会遇到需要动态变化的视觉效果。今天我们将讨论如何利用 CSS 的 mix-blend-mode 属性,实现一个文本穿过特定背景时反色的效果。具体来说,我们会创建一个背景为黑色的 div 元素,并让文本从中穿过。当文本进入 div 的区域时,其颜色会从黑色变为白色,离开时则 阅读全文 »
Vue 3 + Vite 在 Vercel 部署及跨域配置指南 发表于 2025-01-24 更新于 2025-03-09 分类于 share 前言 vite项目可以直接部署到vercel上,不用做任何修改。但是这里会遇到一个问题,就是网站访问接口跨域。如果是普通的服务器,那么通常就是用nginx做反向代理。但是对于Vercel我们无法这么做。 解决方法 采用vercel上的配置做代理。 项目安装插件 pnpm install http-p 阅读全文 »
TypeScript 技巧记录 发表于 2025-01-24 更新于 2025-02-18 分类于 other const 的妙用 在日常开发中,经常能看到这种 const ROLE = {} as const 。 原来使用as const 主要是为了在 TypeScript 中将对象 ROLE 的属性设置为只读。从而增强安全性,此外还能帮助 TS 推到更精确的类型。 同时在使用的过程中使用 ROLE[”xxx”] as readonly 可以防止在代码中意外修改 ROLE 的值。 下面是一个权限判断的例子... 阅读全文 »
前端必学:CSS 盒子模型与布局技巧 发表于 2025-01-24 更新于 2025-02-11 分类于 thinks 前言 盒子模型的理解是前端使用 css 实现准确布局、处理元素排列的关键,下面是对 MDN 上盒子模型文章的一部分难点做见解。 其一就是区块盒子和行内盒子上的行为,其二是 2 种盒子模型的大小问题。 区块盒子和行内盒子 在 CSS 中,有几种类型的盒子,一般分为 区块盒子(block boxes)和 行内盒子(inline boxes)。这里的类型是指盒子在页面流中的行为方式以及与周围盒子元素的关... 阅读全文 »
浅谈 CSS3 视口单位:如何优化移动端和PC端显示 发表于 2025-01-24 更新于 2025-02-11 分类于 thinks 前言 网站会在 PC 和移动端上浏览,那么各个浏览器和设备的差异性,会使得兼容处理是一件麻烦的事情。尤其是移动端上的那些个异形屏和内容展示的理念。对此我使用的是tailwind css 。今天要分享的是移动端上的屏幕展示问题。 视口单位概述: vw (视口宽度):视口宽度的 1%。 vh (视口高度):视口高度的 1%。 设置元素的宽度为 100vw,高度为 100vh,该元素将覆盖整个视口。... 阅读全文 »