title: Nuxt Kit 自动导入功能：高效管理你的模块和组合式函数 date: 2024/9/14 updated: 2024/9/14 author: cmdragon excerpt: 通过使用 Nuxt Kit 的自动导入功能，您可以更高效地管理和使用公共函数、组合式函数和 Vue A ...

前言 本篇只会教 Angular Material Datepicker 里最关键的组件 -- Calendar 组件。 还有如何自定义 DateAdapter，让 Calendar 支持 TC39 Temporal。 有兴趣想学完整 Datepicker 的朋友们，请移步官网。 只对 Calend ...

IntersectionObserver (自动监听元素是否进入了设备的可视区域之内) 示例： const io = new IntersectionObserver(callback, option); // 获取元素 const target = document.getElementById( ...

同步加载 阻塞模式，响应安全性强 过多JS加载会影响页面效率 默认情况下，JS是同步加载，及优先加载外部JS，只有当JS文件加载完成，don和css才开始加载 <script src = 'index.js' ></script> 异步加载 非阻塞加载，执行效率高 动态创建script defer ...

一、实现一个光影墙 1. 根据自定义坐标点，输出一个光影墙 /** * 添加光影墙 */ function addLightWall() { const geometry = new THREE.BufferGeometry(); const vertices = new Float32Array( ...

title: 使用 Nuxt Kit 检查模块与 Nuxt 版本兼容性 date: 2024/9/13 updated: 2024/9/13 author: cmdragon excerpt: 通过 Nuxt Kit 提供的兼容性检查工具，您可以轻松地确保您的模块与不同版本的 Nuxt 兼容。这将有 ...

1. Performance API 的用处 Performance API 是浏览器中内置的一组工具，用于测量和记录页面加载和执行过程中的各类性能指标。它的主要用处包括： 监控页面资源加载：跟踪页面中的资源（如 CSS、JavaScript、图片）的加载时间。 分析页面加载时间：从导航到页面完全渲 ...

此教程适应于以webpack，vue-cli，vite等脚手架构建的vue项目。当然，vue2和vue3都是可以滴。 1. 前提：你的代码库已经提交到Github上 如果没有的话，请到GitHub上新建仓库，并把你本地的项目提交到GitHub上新建的仓库里。 具体方法，可以参考我的博客 Git使用记 ...

一、解构 如图所示，手机浏览器的效果。代码就是简单的html语言加上一个JavaScript脚本，界面主要分3部分，功能实现主要分3个函数。 （一）显示样式 在头里定义了居中显示的CSS样式，将来在浏览器中居中显示倒计时X分XX秒。 <style type="text/css"> .center { ...

我们是袋鼠云数栈 UED 团队，致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神，探索前端道路，为社区积累并传播经验价值。 本文作者：霁明 什么是CORS CORS（跨域资源共享）是一种基于HTTP头的机制，可以放宽浏览器的同源策略，实现不同域名网站之间的通信。 前置知识 同源定义：协议、域 ...

1、使用 Object.entries() 和 Object.fromEntries() // 将对象转换为数组并转换回来，以便于操作 const person = { name: 'jack', age: 20 }; const entries = Object.entries(person); ...

title: Nuxt Kit 的使用指南：从加载到构建 date: 2024/9/12 updated: 2024/9/12 author: cmdragon excerpt: 摘要：本文详细介绍了Nuxt Kit的使用方法，包括如何使用loadNuxt加载配置、buildNuxt进行项目构建、l ...

安装vite npm create vite@latest 你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue + ts 项目，运行: # npm 7+，需要添加额外的 --： npm create vite@latest my-vue-app - ...

codecv —— 一款制作简历的工具，帮助你以 Markdown 的简洁语法快速编写生成专业的简历，并支持转为 PDF 保存，还提供了海量模板。 ...

title: Nuxt Kit 的使用指南：模块创建与管理 date: 2024/9/11 updated: 2024/9/11 author: cmdragon excerpt: 摘要：本文是关于Nuxt Kit的使用指南，重点介绍了如何使用defineNuxtModule创建自定义模块及inst ...

前言 在欧阳的上一篇 这应该是全网最详细的Vue3.5版本解读文章中有不少同学对Vue3.5新增的onWatcherCleanup有点疑惑，这个新增的API好像和watch API回调的第三个参数onCleanup功能好像重复了。今天这篇文章来讲讲新增的onWatcherCleanup函数的使用场景 ...

一、飞线效果 功能说明：支持设置点的个数，飞线速度、起始和终止颜色值、线宽、线的大小 原理： 1. 首先绘制一条与线长度相同的线，线中各点的大小逐渐变小 2. 如何让线动起来？假设点的个数总共为num个，传入的点的下标为a，通过变化的时间计算出移动的下标b，如果a+b>=num则代表，该点可见，否则 ...

title: 使用 nuxi upgrade 升级现有nuxt项目版本 date: 2024/9/10 updated: 2024/9/10 author: cmdragon excerpt: 摘要：本文介绍了如何使用nuxi upgrade命令升级Nuxt 3项目，包括打开终端、运行升级命令、使用 ...

在 Web 开发中，我们经常需要区分用户是否通过刷新操作重新加载了页面。这一操作可能是由用户手动刷新（如按下 F5 键或点击浏览器刷新按钮）或通过浏览器自动重新加载。判断页面是否刷新有助于开发者优化用户体验，例如在使用 vue 的时候需要进行权限控制，就需要判断在刷新后根据登录者的权限去添加对应的路 ...

问题描述： 今天在写vue项目时，用到了element plus中的el-upload组件，发现这么一个问题： 组件各个功能都是正常的，也可以上传图片，但是 虚线框里那么大一片区域只有中间那个十字是可以点击的 点击查看代码 <el-upload class="ImageUpload" :action ...