webpack和vite的区别，为什么vite启动速度比webpack快？
写在开头 点赞 + 收藏 学会 一.webpack和vite的区别 1.构建速度不同 Webpack: Webpack的构建速度相对较慢，尤其在大型项目中，因为它需要分析整个依赖图，进行多次文件扫描和转译。 Vite: Vite以开发模式下的极速构建著称。它利用ES模块的特性 ...
Vue3.5中解构props，让父子组件通信更加丝滑
前言 在Vue3.5版本中响应式 Props 解构终于正式转正了，这个功能之前一直是试验性的。这篇文章来带你搞清楚，一个String类型的props经过解构后明明应该是一个常量了，为什么还没丢失响应式呢？本文中使用的Vue版本为欧阳写文章时的最新版Vue3.5.5 关注公众号：【前端欧阳】，给自己一 ...
贼好用！五分钟搭建一个美观且易用的导航页面！
Pintree 是一个开源项目，旨在将浏览器书签导出成导航网站。通过简单的几步操作，就可以将书签转换成一个美观且易用的导航页面。 ...
全面掌握 Jest：从零开始的测试指南（上篇）
随着JavaScript在前后端开发中的广泛应用，测试已成为保证代码质量的关键环节。 为什么需要单元测试 在我们的开发过程中，经常需要定义一些算法函数，例如将接口返回的数据转换成UI组件所需的格式。为了校验这些算法函数的健壮性，部分开发同学可能会手动定义几个输入样本进行初步校验，一旦校验通过便不再深 ...
Nuxt Kit 中的页面和路由管理
title: Nuxt Kit 中的页面和路由管理 date: 2024/9/17 updated: 2024/9/17 author: cmdragon excerpt: 摘要：本文介绍了Nuxt Kit中页面和路由管理的高级功能，包括extendPages自定义页面路由、extendRouteR ...
Angular 18+ 高级教程 – 国际化 Internationalization i18n
介绍 先讲讲名词。 Internationalization 的缩写是 i18n，中文叫国际化。 Globalization 是 Internationalization 的同义词，都是指国际化。 Localization 的缩写是 l10n，中文叫本地化。 i18n vs l10n 一个国际化，一 ...
Nuxt Kit 中的上下文处理
title: Nuxt Kit 中的上下文处理 date: 2024/9/16 updated: 2024/9/16 author: cmdragon excerpt: Nuxt Kit 提供的上下文处理工具，尤其是 useNuxt 和 tryUseNuxt，为模块化开发提供了极大的便利。通过这些函 ...
[JS] ES Modules的运作原理
本文介绍了 ES Modules (ESM) 在浏览器环境中的运行原理，详细阐述了 ESM 的三大加载步骤：构建、实例化、求值，并讨论了其动态加载能力、循环依赖处理方式及与 CommonJS 的区别。 ...
这些年没来得及学习的一些 HTML5 标签
认识并学习下还没来得及学习的一些 HTML5 标签 <ruby> 标签 HTML <ruby> 元素被用来展示东亚文字注音或字符注释。 比如: <ruby>兄弟<rt>xiongdi</rt></ruby> <rt> 元素包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元 ...
Nuxt Kit 组件管理：注册与自动导入
title: Nuxt Kit 组件管理：注册与自动导入 date: 2024/9/15 updated: 2024/9/15 author: cmdragon excerpt: Nuxt Kit 为组件的注册和导入提供了灵活高效的解决方案。无论你是要批量导入组件，还是单独处理特定组件，这些工具都能 ...
Element UI 组件 Dialog 中 before-close 与 close 的区别
<el-dialog width="600px" :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" :before-close="handleBeforeClose" @open="handleOpe ...
Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数
title: Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 date: 2024/9/14 updated: 2024/9/14 author: cmdragon excerpt: 通过使用 Nuxt Kit 的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和 Vue A ...
Angular Material 18+ 高级教程 – Datepicker の Calendar & Custom DateAdapter (Temporal)
前言 本篇只会教 Angular Material Datepicker 里最关键的组件 -- Calendar 组件。 还有如何自定义 DateAdapter，让 Calendar 支持 TC39 Temporal。 有兴趣想学完整 Datepicker 的朋友们，请移步官网。 只对 Calend ...
使用IntersectionObserver 实现：自动监听元素是否进入了设备的可视区域之内
IntersectionObserver (自动监听元素是否进入了设备的可视区域之内) 示例： const io = new IntersectionObserver(callback, option); // 获取元素 const target = document.getElementById( ...
ThreeJS Shader的效果样例光影墙、扩散面(四)
一、实现一个光影墙 1. 根据自定义坐标点，输出一个光影墙 /** * 添加光影墙 */ function addLightWall() { const geometry = new THREE.BufferGeometry(); const vertices = new Float32Array( ...
使用 Nuxt Kit 检查模块与 Nuxt 版本兼容性
title: 使用 Nuxt Kit 检查模块与 Nuxt 版本兼容性 date: 2024/9/13 updated: 2024/9/13 author: cmdragon excerpt: 通过 Nuxt Kit 提供的兼容性检查工具，您可以轻松地确保您的模块与不同版本的 Nuxt 兼容。这将有 ...
使用 Performance API 实现前端资源监控
1. Performance API 的用处 Performance API 是浏览器中内置的一组工具，用于测量和记录页面加载和执行过程中的各类性能指标。它的主要用处包括： 监控页面资源加载：跟踪页面中的资源（如 CSS、JavaScript、图片）的加载时间。 分析页面加载时间：从导航到页面完全渲 ...
vue3项目部署到Github
此教程适应于以webpack，vue-cli，vite等脚手架构建的vue项目。当然，vue2和vue3都是可以滴。 1. 前提：你的代码库已经提交到Github上 如果没有的话，请到GitHub上新建仓库，并把你本地的项目提交到GitHub上新建的仓库里。 具体方法，可以参考我的博客 Git使用记 ...
手把手教你制作最简网页版倒计时程序（核心代码仅25行）
一、解构 如图所示，手机浏览器的效果。代码就是简单的html语言加上一个JavaScript脚本，界面主要分3部分，功能实现主要分3个函数。 （一）显示样式 在头里定义了居中显示的CSS样式，将来在浏览器中居中显示倒计时X分XX秒。 <style type="text/css"> .center { ...
