Nuxt Kit 中的插件:创建与使用
title: Nuxt Kit 中的插件:创建与使用 date: 2024/9/19 updated: 2024/9/19 author: cmdragon excerpt: 摘要:本文介绍了在 Nuxt 3 框架中使用 Nuxt Kit 创建和管理插件的方法,包括使用addPlugin注册插件、创 ...
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使用记 ...