dorisrv-CSDN博客

原创 Vue 3 从基础到高阶全攻略

是否为偶数: {{ isEven?'是' : '否' }}增加</button><button @click="decrement">减少

2025-12-15 10:47:46 906

return {// 获取所有输出文件// 添加版权信息plugins: [vue(),})})Vite 作为一款现代前端构建工具，凭借其极速的开发体验、灵活的配置和强大的插件系统，正在改变前端开发的方式。通过本文的学习，你应该已经了解了 Vite 的核心原理、配置优化和插件开发等方面的知识。极速的冷启动：利用原生 ESM，实现按需编译高效的热更新：只替换修改的模块，提供流畅的开发体验灵活的配置：丰富的配置选项，满足各种项目需求强大的插件系统。

2025-12-15 10:47:08 960

原创前端可视化图表库精选与实战指南

选择合适的图表库是实现优秀数据可视化的关键。ECharts：功能全面，适合各种复杂可视化需求Chart.js：轻量级，易于使用，适合简单图表需求D3.js：高度可定制，适合需要复杂可视化效果的场景：企业级图表解决方案，与 Ant Design 完美集成Highcharts：商业化图表库，功能丰富，支持各种图表类型每种图表库都有其独特的优势和适用场景。在实际项目中，你需要根据项目需求、团队技术栈和预算等因素综合考虑，选择最适合的图表库。记住，数据可视化的最终目标是帮助用户理解数据。

2025-12-15 10:44:28 915

原创 React 状态管理：Redux Toolkit 快速上手指南

<p>计数: {count}</p><button onClick={() => dispatch(increment())}>增加</button><button onClick={() => dispatch(decrement())}>减少</button>

2025-12-11 11:24:02 754

原创 React 状态管理：Jotai 快速上手指南

Jotai 是一个基于原子的轻量级 React 状态管理库，它提供了灵活的状态管理方式和高性能的状态更新机制。通过将状态拆分为独立的原子单元，Jotai 使得状态管理更加直观和易于维护。无论是中小型应用还是大型项目，Jotai 都能很好地满足状态管理的需求。如果你正在寻找一个替代传统状态管理库的方案，或者想要尝试原子化的状态管理方式，那么 Jotai 绝对值得一试！下一篇文章，我们将介绍 Redux Toolkit，这是 Redux 官方推荐的现代化 Redux 开发方式，敬请期待！✨。

2025-12-11 11:23:31 799

原创 React 状态管理：Zustand 快速上手指南

Zustand 是一个轻量级、简单易用的 React 状态管理库，它提供了丰富的功能和灵活的使用方式，同时保持了代码的简洁性。无论是中小型应用还是大型项目，Zustand 都能很好地满足状态管理的需求。如果你正在寻找一个替代 Redux 的轻量级状态管理库，或者想要简化现有的状态管理逻辑，那么 Zustand 绝对值得一试！下一篇文章，我们将介绍另一个优秀的 React 状态管理库——Jotai，敬请期待！✨。

2025-12-11 11:22:55 669

原创优雅使用本地存储

*** 本地存储Hook* @param {string} key - 存储键名* @param {any} initialValue - 初始值* @param {Object} options - 选项* @returns {[any, function]} [存储的值, 设置值的函数]*/${import {/*** 本地存储Hook* @param {string} key - 存储键名* @param {any} initialValue - 初始值。

2025-12-10 13:57:34 1021

原创优雅处理数组的几个实用方法

数组处理是前端开发中的基础技能，掌握优雅的数组处理方法可以让你的代码更加简洁、高效、易读。数组去重：使用Set和filter方法数组扁平化：使用flat()和reduce方法数组分组：使用reduce方法数组查找：使用find()、findIndex()和filter()方法数组排序：使用sort()方法，包括复杂排序框架中的数组处理：React和Vue 3中的数组处理技巧最佳实践：不可变操作、性能优化和可读性希望这些小技巧对你有所帮助！下次处理数组时，不妨试试这些优雅的方法吧～✨。

2025-12-10 13:56:09 612

原创优雅实现防抖与节流

如果一个函数被频繁调用，只有当调用停止一段时间后，才执行最后一次调用。形象地说：就像坐电梯，只有当没有人再进入电梯时，电梯才会关门运行。限制函数在一定时间内只能执行一次。形象地说：就像水龙头，即使一直开着，也只会每隔一段时间流出一滴水。/*** 防抖Hook* @param {any} value - 要防抖的值* @param {number} delay - 延迟时间（毫秒）* @returns {any} 防抖后的值*/// 设置定时器}, delay);

2025-12-10 13:55:37 611

原创 Next.js 16 自定义 SVG Icon 组件实现方案

在type.d.ts动态加载：使用动态导入(import())实现图标按需加载，减少初始加载体积缓存机制：实现了图标缓存，避免重复加载相同的图标，提升性能类型安全：使用TypeScript定义图标名称类型，确保使用时的类型安全自动化工具：集成SVGR工具，自动将SVG文件转换为React组件与Chakra UI集成：基于Chakra UI的Icon组件，支持丰富的样式自定义响应式设计：支持自定义图标尺寸，适应不同的使用场景易于扩展：添加新图标只需几个简单步骤。

2025-12-09 14:08:19 641

原创 CSS Grid + Flexbox响应式复杂布局实现

在前端布局中，CSS Grid和Flexbox是两种强大的布局工具，但它们各自擅长不同的场景：结合使用这两种布局技术，我们可以：CSS Grid是一种二维布局系统，允许我们同时控制行和列：2. Flexbox基础Flexbox是一种一维布局系统，适合处理元素的对齐和分布：🚀 基础实现：卡片布局让我们先通过一个简单的卡片布局，了解如何结合使用CSS Grid和Flexbox。我们需要实现一个响应式卡片布局，包含以下特点：在这个例子中，我们使用了：现在让我们实现一个更复杂的仪表板布局，展示如何结合C

2025-12-09 09:49:48 660

原创 React轻量级状态管理方案（useReducer + Context API）

通过组合使用React内置的useReducer和避免props drilling：通过Context在组件树中直接共享状态集中管理状态：使用reducer函数统一处理状态更新逻辑简化组件间通信：组件可以直接获取和更新共享状态无需额外依赖：利用React内置功能，减少项目依赖良好的可维护性：状态逻辑与UI组件分离，便于测试和维护这种方案兼顾了简洁性和功能性，是中等规模React应用的理想选择。通过合理的状态设计和性能优化，我们可以构建出高效、可维护的前端应用。希望这个小技巧对你有所帮助！

2025-12-09 09:49:22 1071

原创使用requestIdleCallback和requestAnimationFrame优化前端性能

和是浏览器提供的两个强大的性能优化API，它们可以帮助我们更合理地安排任务执行时间，避免阻塞主线程。用于高优先级、与渲染相关的任务在下一次浏览器重绘之前执行适用于动画效果和需要与渲染同步的任务用于低优先级、非紧急任务在浏览器空闲时间执行适用于批量处理和后台任务通过合理使用这两个API，我们可以显著提升页面的流畅度和响应速度，为用户提供更好的体验。希望这个小技巧对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言讨论 🤗Web.dev - 优化动画性能。

2025-12-09 09:47:24 908

原创优雅的React表单状态管理

让我们创建一个通用的useForm/*** 通用表单状态管理Hook* @param {Object} initialValues - 表单初始值* @returns {Object} 包含表单值、onChange处理函数和重置函数*/// 用一个对象统一管理所有表单字段// 通用的onChange处理函数// 处理复选框等特殊类型}));// 重置表单到初始状态// 使用示例// 一行代码初始化整个表单email: ''});

2025-12-08 18:20:08 578

原创高性能的懒加载与无限滚动实现

Intersection Observer API 是实现高性能懒加载和无限滚动的现代解决方案。性能优越：异步观察，避免了频繁的 DOM 操作和重排使用简单：API 设计简洁，易于理解和使用功能强大：支持多种配置选项，满足不同需求浏览器原生支持：无需依赖第三方库通过合理使用懒加载和无限滚动，我们可以显著提升页面性能和用户体验。无论是原生 JavaScript 还是 React、Vue 等框架，都可以轻松实现这些功能。希望这个小技巧对你有所帮助！

2025-12-08 14:22:05 785

原创优雅地处理前端错误边界

错误边界是提升前端应用稳定性和用户体验的重要手段。防止单个组件错误导致整个应用崩溃提供友好的错误提示，引导用户操作收集错误信息，帮助开发者快速定位问题提升应用的专业感和可靠性希望这个小技巧对你有所帮助！如果你有任何问题或建议，欢迎在评论区留言讨论 🤗React 官方文档 - 错误边界Vue 官方文档 - 错误处理#React #Vue #前端错误处理 #用户体验优化。

2025-12-08 14:00:50 866

原创 Next.js 16 Page Router 国际化

Next.js 16 国际化方案采用无URL变更设计，通过浏览器缓存和Cookie管理语言切换。核心实现包括：1）配置next-i18next禁用自动检测；2）自定义useI18nLng钩子实现双重存储机制（localStorage+Cookie），支持iframe环境检测和智能语言切换；3）在_app.tsx初始化默认语言。该方案避免了传统URL前缀方式的SEO分散和用户体验问题，保持URL稳定性的同时提供流畅的多语言支持。技术栈包含Next.js 16、TypeScript、next-i18next等，

2025-12-05 18:29:34 674

原创 Next.js Page Router + Chakra UI 实现优雅的主题切换

本文介绍如何在Next.js Page Router项目中实现优雅的主题切换功能。通过Chakra UI和next-themes库，开发者可以轻松实现浅色/深色模式切换、系统主题检测和状态持久化存储。文章详细讲解了从项目初始化、依赖安装到主题切换组件实现的完整流程，包括自定义Hook、图标切换按钮以及根据主题返回不同值的实用方法。最终实现了一个支持无缝切换、带图标动画且自动适配系统主题的解决方案。

2025-12-05 18:05:53 842

原创 Next.js 16 + next-intl App Router 国际化实现指南

本文详细介绍了在Next.js 16项目中使用next-intl实现App Router国际化的完整方案。主要内容包括：项目架构：采用动态路由[locale]实现语言前缀路由，将国际化相关代码集中在i18n目录下核心配置：语言配置、路由规则、导航工具和翻译加载逻辑实现步骤：创建动态语言路由布局和页面实现根页面重定向开发语言切换组件技术亮点：类型安全、性能优化、模块化设计扩展建议：添加更多语言、优化翻译加载、增强翻译功能该方案支持SEO友好的多语言路由，通过模块化设计提高可维护性，适合需要国

2025-12-03 12:33:22 1061

原创 Vue2.0 cross-env配置分环境本地调试代理及打包

npm i cross-env -D/package.json，根目录下package文件，默认初始化是这样"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "build": "node build/build.js", "start": "npm run dev", "lint": "eslint --ext .js,.vue

2021-11-23 11:11:52 1529

原创 vue打包后 history模式 tomcat部署子目录静态文件路径分析

history根目录路由mode变为history后，需要在服务器配置 url重写,在根目录创建web.config文件加下面内容复制进去<?xml version="1.0" encoding="utf-8"?><configuration> <system.webServer> &nbs...

2019-09-03 15:04:45 4248

原创 vue打包后 hash模式跟子目录静态文件路径分析

hash根目录background: url('/static/logo.png') no-repeat center/ 50%; 跟路径 / 和相对路径<img src="/static/logo.png" alt="" srcset=""> 跟路径 / 和相对路径<div class="i...

2019-09-03 15:03:59 1549

原创 js前端下载文件评估

第一种在线地址 a标签 downloadPC端效果 a标签不加download pdf 直接预览 png 直接预览 doc,xls,ppt 弹框下载 a标签加download 注：href地址必须是和网页同源资源，否则download失效，效果和不加download一样 pdf,png,doc,xls,ppt 弹框下载手机端效果谷歌模拟器...

2019-08-26 12:52:37 259

转载 vue中for循环更改数据，数据变化但页面数据未变

let that = this; for(let i = 0;i<that.tableData.length;i++){ this.tableData[i].zzzk = this.midForm.zzzk; console.log(this.tableData[i].zz...

2018-06-25 10:34:39 7265

转载 WebStorm 2018/2017汉化破解教程

WebStorm2018/2017汉化破解教程 ...

2018-04-18 11:24:37 994

转载在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]

写在前面：本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后，又一篇关于vue-cli脚手架配置相关的文章，因为有些文章步骤不够清晰，当时我引入JQuery、bootstrap的时候颇费了一番功夫，所以本文的步骤会尽量详细一点。有需要的朋友可以做一下参考，喜欢的可以点波赞，或者关注一下，希望可以帮到大家。引入bootstrap1. 下载所需要的bootstrap文件。将要使用的b

2018-04-10 09:36:45 503

原创 JS（程序结构之选择结构）

目录一、程序的三大结构二、选择结构的单分支结构三、选择结构的双分支结构四、选择结构的多分支结构

2018-01-09 21:10:05 739

原创 JS（JS介绍、变量、运算、数据类型）

目录一、JavaScript基本介绍二、JavaScript与HTML5的关系三、如何编写运行JS 四、变量的概念及基本运算五、变量命名规则和关键字的介绍六、算术、赋值、关系运算符七、数据类型的转换八、NaN的概念和应用九、八进制和十六进制一、Javascript基本介绍JavaScript 用来做人与浏览器之间的行为，是一种脚本语言。静态网页就是没

2018-01-08 13:03:05 1712

原创 css3选择器&文字与字体相关样式

目录一、css3的概念、优势及应用二、渐进增强和优雅降级的简介三、css3部分新增选择器的语法及应用场景四、css3层级选择器的语法及应用场景五、css3新增关于文本属性的语法及应用场景一、css3的概念、优势及应用1.1 css3的概念 css3即层叠样式表（cascading stylesheet）1.2 css3的优势 css3是css技术的升级版本，cs

2017-12-27 21:00:05 2274