摘要：虽然进度条是假的，但提升用户体验是真的！！ 毕竟如果网页长时间白屏，用户可能会咔嚓一下就关了浏览器，但如果有个进度条在跑，至少说明网页有小动作在进行中… 有研究表明，网页白屏超过 3 秒就可能导致用户流失。 NProgress 超级简单，核心方法就三四个，但人家实用性高啊，周下载量百万以上，足以说明
阅读全文
posted @ 2025-11-10 15:38
随笔分类 - NodeJs
摘要：watch使用不当，轻则内存占用飙升，重则页面卡顿、响应延迟。尤其在监听大型嵌套对象时，滥用deep: true会触发全量遍历，造成严重的性能损耗。 根本问题在于：只要对象内部任意层级的属性发生变化，无论是否相关，都会执行回调。这种“无差别监听”在高频更新场景下极易拖垮应用。 方案一：精准监听，直击
阅读全文
posted @ 2025-11-06 16:41
摘要：一文吃透 Vue2 / Vue3 的 ::v-deep、/deep/、>>>、:deep() 区别，结合 Element Plus 实战演示，顺便告诉你“为什么劝你别滥用”。 1. 为什么需要“深度选择器”？ 在 .vue 文件里，只要给 <style> 加上 scoped 属性，Vue 就会自动为
阅读全文
posted @ 2025-11-06 11:58
摘要：最近公司在做一款小程序，其中最主要业务的体现方式就是“与AI对话”，那一定是绕不过有着打字机效果的流式传输了。 什么是流式传输？ 在解决问题之前，我们需要了解什么是流式传输。流式传输指的是将数据分成多个数据流，通过网络传输，以减少网络延迟和提高性能。在某些情况下，流式传输也可以用于将视频流和音频流传
阅读全文
posted @ 2025-09-26 21:23
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>14种纯css3对话气泡样式代码</title> <link rel="stylesheet" href="default.css" /> </head>
阅读全文
posted @ 2025-09-26 16:02
摘要：本文介绍了如何在找不到原始源码的情况下，利用reverse-sourcemap工具将.js.map文件转换回源码，以便进行必要的代码修改。教程包括了安装步骤和两种常见操作案例：单个文件和批量文件的反编译。 一、问题描述工作中，遇到了一个前同事开发的一个项目，打包之后已经发布了，但是，在使用后期发现需
阅读全文
posted @ 2025-08-19 16:34
摘要：Three.js 是一个用于在网页浏览器中创建和显示3D图形的JavaScript库。它基于WebGL技术，简化了复杂的3D渲染过程，使得开发者不需要深入了解WebGL的底层API就能快速上手创建丰富的3D内容。Three.js提供了大量的功能，包括但不限于几何体、材质、光源、相机、动画和加载器等，
阅读全文
posted @ 2025-05-28 16:26
摘要：vben 打包 地址不带#号 在使用 Vue.js 进行开发时，经常会遇到需要将项目打包并部署到服务器上的需求。打包后的项目通常需要通过 HTTP 服务器提供服务，以便在浏览器中访问。在这个过程中，如果你遇到了打包后的地址中包含#号的问题，这通常是由于 Vue 路由模式导致的。 背景 在 Vue.j
阅读全文
posted @ 2025-04-28 11:03
摘要：因为域名有限，所以想把vue项目部署在某个域名的二级路径上，例如：https://www.example.com/admin/下 nginx的配置如下： server { listen 8095; # Admin server_name localhost; location / { #禁止浏览器缓
阅读全文
posted @ 2025-04-24 17:31
摘要：npm命令概述npm提供了一系列命令，用于管理项目的依赖、运行脚本、发布包等。以下是一些常用的npm命令： npm install：安装项目的依赖。 npm start：运行项目。 npm run：运行在package.json中定义的脚本。 npm test：运行测试。 npm run build
阅读全文
posted @ 2025-04-18 11:22
摘要：解决：更新 nvm 到最新版本。 二，必须通过nvm安装node js , 在系统面板检查是否有独立安装nodejs, 有则删除。
阅读全文
posted @ 2025-01-16 09:03
摘要：浏览器在加载和显示网页时，会根据不同的情况，决定是否重新从服务器获取网页内容或使用缓存中的内容。缓存是指浏览器在本地存储的一些网页资源，如图片、CSS、JS等，以便于下次访问时快速加载，提高用户体验和网站性能。 对于大多数浏览器而言，都包含有三种刷新方式，以下我们以Chrome浏览器为例： F5刷新
阅读全文
posted @ 2025-01-14 14:59
摘要：概要 我们做一个纯前端自动提示用户刷新页面的功能，这个功能主要是防止用户的js代码还是旧版的导致某些功能没能及时更新。 整体架构流程 1、我们先在 public/version.json 创建这个json文件，用来存储版本号 { "version": "1.0" } 2、我们可以在 vite.con
阅读全文
posted @ 2025-01-14 09:24
摘要：前言 页面中会显示当前版本号，每次更新需要手动更改版本号会很麻烦，现在是每次npm run build时会自动更新版本号，更新规律自己定义。 TODO：没有区分开发环境、测试环境、正式环境 创建自动更新版本脚本 在根目录下创建autoVersion.js脚本文件 const fs = require
阅读全文
posted @ 2025-01-13 17:12
摘要：背景当一个页面很久没刷新，又突然点到页面。由于一些文件是因为动态加载的，当重编后（如前后端发版后），这些文件会发生变化，就会出现加载不到的情况。进而导致正在使用的用户，点击页面发现加载不顺畅、卡顿问题。解决思路使用Vite构建一个插件，在每次打包时自动生成version.json版本信息文件，记录版
阅读全文
posted @ 2025-01-10 09:27
摘要：今天在创建vue3项目的时候报错了一个启动开发服务器时遇到了一个构建错误 查询了一下，执行npm i 的时候，他并没有帮我安装vite PS D:\file\vue\hello_vue3> npm list vite hello_vue3@0.0.0 D:\file\vue\hello_vue3 └
阅读全文
posted @ 2025-01-03 17:47
摘要：安装pnpm（Performant npm），即高性能的npm包管理工具，可以通过多种方式进行。以下是详细的安装步骤： 一、通过npm全局安装 window下使用独立脚本安装： //默认安装路径：`C:\Users\【用户名】\AppData\Local\pnpm` //如果想要指定安装目录，请提前
阅读全文
posted @ 2024-12-17 16:10
摘要：vue 中代码（在对应的地方添加） <a-pagination v-model:current="current" :total="total" v-model:page-size="pageSize" :showSizeChanger="true" :hideOnSinglePage="true"
阅读全文
posted @ 2024-11-08 16:27
摘要：在Node18.16和16.20版本下使用vben框架时，遇到pnpminstall报错关于eslint-config缺失的问题， 解决方案是通过添加pnpm-workspace.yaml文件并指定内部依赖，确保`@vben/eslint-config`版本配置正确。 问题描述node18.16 /
阅读全文
posted @ 2024-10-24 18:03
摘要：阿里云官方镜像站：阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 https://developer.aliyun.com/mirror/?spm=a2c6h.13651102.0.0.6b581b11FYGgU9&serviceType=mirror 简介： 用CNPM/淘宝源的开发者们请注
阅读全文
posted @ 2024-10-10 14:43
浙公网安备 33010602011771号