2024年 07月 30日Vue3项目中实现“电梯”效果，快速实现锚点导航功能Vue3项目中实现“电梯”效果的锚点导航功能。该功能包括点击左侧导航后右侧内容区平滑滚动到对应位置，以及右侧内容区滚动到相应位置时左侧导航动态更新选中状态。实现方法结合了scrollIntoView和IntersectionObserver —如果您的项目中没有使用Hash路由，可以使用纯css实现，具体操作请参照 scroll-behavior 如果您的项目跟我目前一样，使用的是vue的Hash…
2024年 05月 22日重归基础：提升可访问性与用户体验的5大HTML属性在高速发展的Web开发领域，常常令人目不暇接的是层出不穷的新框架、库以及前沿技术。然而，有时最为显著的提升源自于对基础知识的重新探索。本篇博客文章旨在引领您深入了解五个HTML属性，它们不仅对提升网站的可访问性至关重要，同时也能极大增强用户的整体体验。无论您是编程老手还是初涉此领域的新人，让我们一起探索这些元素的潜力，以创建更具包容性的Web体验。 —1. hreflang hreflang属性旨在为 <a> 或 <link> 元素中的链接资源指定语言种类，其功能与lang属性相似，但特别适用于标注链接目标的语言属性。 为什么使用 hreflang? 改善用户体验及搜索引擎优化（SEO…
2024年 04月 15日Next.js中的基本状态管理这篇Blog提供了关于在 Next.js 中进行基本状态管理的综合指南。它涵盖了使用 useState 和 useReducer 进行本地状态管理，以及使用 Context API 进行全局状态管理的方法。此外，它还介绍了如何从外部 API 获取数据，并使用 SWR 简化数据获取和状态管理的过程。最后还探讨了 Next.js 中的中间件集成以及服务器组件中的状态管理技术。 —Next.js 中的基本状态管理 让我们从 Next.js 状态管理的基础开始。在接下来的章节中，我们将讨论基本的 Hooks、技术和工具，以便有效地管理状态。 使用 useState Hook 进行状态管理 useState Hook 是在传统的 React…
2024年 01月 22日12个国内外最受欢迎及常用的Vue 3组件库Vue 3的迅速普及带来了一系列强大的UI框架，为开发者提供了灵活、高性能的工具。本文介绍了BalmUI、Element Plus、Wave UI、Ionic Vue、Vuetify 3、Quasar、PrimeVUE、Ant Design Vue、Vuestic UI、Vue DevUI和Inkline等框架，它们适用于不同的开发需求，加速开发并提升用户体验。 —在此，我将展示一系列我知道的并且认为是非常出色的Vue 3 UI框架（先国内再国外，除此无特定顺序），这里面肯定有你熟悉的组件库。它们将助力你打造美观的Vue 3应用，同时提供出色的开发者体验。让您在选择组件库时可以根据项目需求进行选择。 1. Element Plus…
2023年 11月 12日减少 JavaScript 以提升网页性能在现代网站开发中，减少 JavaScript 的使用是至关重要的，也是整体页面效率的关键因素。随着软件工程的发展，对于更快速、更高效的网站以及整体 JavaScript 负载更小的需求一直存在。未使用的 JavaScript 会为你的 Web 应用程序增加不必要的负担，降低整体性能。 —本文将介绍一系列模式和技巧，帮助你通过去除未使用的 JavaScript 来减少这种负担，从而节省时间、优化性能并提高效率。 什么是未使用的 JavaScript？ 简而言之，未使用的 JavaScript，通常称为死代码，是指你的 Web…
2023年 10月 07日使用Vue3的Render函数定制化插槽——以Naive UI为例了解如何巧妙地使用Vue3的Render函数来创建高度可定制化的插槽，本文以Naive UI的NTooltip组件为案例，深入解释了Render函数的运用。 —在前端开发中，Vue3 的 render 函数是一个强大的工具，它允许我们以程序化的方式创建组件和界面元素。本文将重点介绍如何使用 Vue3 的 render 函数来渲染插槽，并以 Naive UI 为例进行演示。 Naive UI 中的 NTooltip 组件 Naive UI…
2023年 08月 24日JavaScript 数组常用方法本文将针对JavaScript，详细介绍一系列常用的数组方法，涵盖了flatMap()、concat()、copyWithin()、every()、fill()、filter()、flat()、forEach()、shift()、includes() 以及 reduce()。通过掌握这些方法，您可以在实际开发中提高工作效率并改善代码质量。 —在JavaScript中，数组是一种常见且必不可少的数据结构，用于存储一系列值。数组方法是对数组进行操作和转换的强大工具。本文将详细解释一些常用的数组方法，包括concat()、copyWithin()、every()、fill()、filter()、flat()、forEach…
2023年 05月 20日使用CSS创建漂亮的边角开发中遇到了需要对元素边角的形状进行调整，使其更佳美观，本文中记录了几种使用css设置边角样式的方法。 —1. 使用border-radius属性 border-radius是创建圆角的基本CSS属性，也是非常有用且常用的一个属性。它允许你将元素的直角边框转换为圆角。这个属性可以应用于任何具有可见边框或背景的 HTML 元素，包括盒子模型中的内边距和边框。 border-radius…
2023年 03月 24日使用 PurgeCSS 删除未使用的 CSS 代码本文介绍了如何使用 PurgeCSS 工具来删除未使用的 CSS 代码，从而减小网站文件大小，提高性能优化。文章还涵盖了 PurgeCSS 在不同 JavaScript 库和框架中的使用示例，以及一些高级配置选项。无论您使用哪种 CSS 框架，本文都将帮助您优化您的项目并提高性能。 —使用 PurgeCSS 删除未使用的 CSS 代码 删除不必要的代码将使您的网站加载速度更快，因为浏览器将请求和解析更少的代码。在本教程中，我们将探讨 PurgeCSS，这是一种用于删除未使用的 CSS 代码的工具。通过将 PurgeCSS…
2023年 02月 22日Vue 3 Composition API 中的响应式特性：ref() 和 reactive()。在组合式 API 中，我们使用两个函数来定义状态，即 ref() 和 reactive()。在本文中，我们将探讨这两个函数，概述它们的独特之处，并学习何时应该使用它们。作为额外内容，我们还将了解如何解包 refs、监视它们的变化，并使用它们创建隐式引用。。 —在单页面应用程序（SPA）中，响应性指的是应用程序根据底层数据的变化能够更新其用户界面的能力。响应性使我们能够编写更清晰的代码，避免了我们需要手动根据数据变化来更新界面。相反，界面会自动更新。 然而，JavaScript 本身并不具备这种能力，因此我们可以通过像 React…
2022年 10月 23日TypeScript的装饰器TypeScript 装饰器是一种特殊类型的声明，它可以附加到类、方法、属性或参数上，用于修改类的行为或添加额外的元数据。装饰器是一种在编译时进行元编程的技术，它使得我们可以以声明性的方式对类和类成员进行扩展或修改，而无需修改原始类的代码。 —…
2022年 10月 22日TypeScript的命名空间和模块模块是更现代化和推荐的组织代码的方式，尤其在大型项目中，模块的组织和依赖管理更加灵活和强大。因此，在 TypeScript 中，通常更推荐使用模块来组织和管理代码。而命名空间则更适用于一些简单的场景，或者在需要与传统 JavaScript 代码进行交互时使用。 —命名空间（Namespace） 定义方式 ：命名空间通过 namespace 关键字来定义。可以将相关的代码包裹在一个命名空间内，避免全局作用域污染和命名冲突。 使用方式 ：在命名空间内定义的成员需要使用 export…
2022年 10月 18日TypeScript的高级类型在实际开发中，根据不同的场景和需求合理地运用TypeScript的这些高级类型，将会大大提升我们的代码质量和开发效率。也可以使我们编写更灵活、更安全、更通用的代码。 —1. 联合类型（Union Types） 联合类型用 | 符号表示，表示一个变量可以是多种类型之一。这在参数或返回值可以是多种类型的情况下非常有用。 上述例子中的 formatInput 函数接受一个参数 input ，它可以是 string 类型或 number…
2022年 10月 13日TypeScript的数组类型在TypeScript中，数组类型是一种非常常用的数据类型，它用于表示一组具有相同类型的元素。在本文中，我们将详细讲解TypeScript中的数组类型，以及如何使用数组来存储和操作数据。 —什么是数组类型？ 数组是一种有序的数据集合，其中的元素可以是相同类型或不同类型。在TypeScript中，我们可以使用数组类型来声明一个变量，该变量可以存储相同类型的多个值。 1.声明数组类型 在TypeScript…
2022年 10月 13日TypeScript的泛型泛型是一种在编程中用于增强代码灵活性和重用性的特性。在TypeScript中，泛型允许我们在定义函数、类或接口时使用类型参数，以表示一种未知的类型。这样，在使用泛型时，我们可以传入不同的类型参数，从而实现对多种类型的支持，使代码更加通用和灵活。 —泛型的理解 在TypeScript中，泛型（Generics…
2022年 10月 11日TypeScript的接口和对象类型接口是TypeScript中非常灵活和可重用的概念，它可以用于定义对象的结构、函数类型、类的结构等。使用接口可以使代码更具可读性和可维护性，并提高代码的复用性。 —什么是接口和对象类型？ 在学习TypeScript…
2022年 10月 10日TypeScript的基础类型TypeScript的基础类型为我们提供了在代码中声明变量和函数类型的方式，这些类型可以帮助我们在开发过程中捕获更多的错误，并提高代码的可读性和可维护性。在学习和使用TypeScript时，掌握这些基础类型是非常重要的一步。 —什么是TypeScript? TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集。TypeScript扩展了JavaScript，添加了静态类型支持，使得代码更加健壮和可维护。TypeScript代码在编译时会被转换为纯JavaScript…
2022年 08月 18日解决 Vue 3 中 ECharts 图表切换页面不渲染的问题本文将为你介绍在 Vue 3 项目中使用 ECharts 图表库时常见的问题：切换页面后图表不再渲染。我们将探讨问题的原因，并提供两种优化方案，一种是使用 keep-alive 缓存组件状态，另一种是手动销毁和重新初始化图表实例。通过本文，你将学会如何确保你的 ECharts 图表在 Vue 3 中始终保持稳定的渲染，提升用户体验。 —问题概述 当使用 ECharts 图表库在 Vue…
2021年 03月 20日Vue3的script-setup 模式中父组件获取子组件的数据在 Vue 3 中，Script-Setup 模式为我们提供了一种全新的组件编写方式，结合 Composition API 的优势，使得组件的逻辑更加清晰和易于维护。然而，在父组件中获取子组件的数据在 Script-Setup 模式下稍有不同。本文将介绍如何使用 defineExpose 宏方法在 Script-Setup 模式下实现父组件获取子组件数据的功能。 —Script-Setup 模式简介 在 Vue 3 中，Script-Setup 模式通过使用 <script setup> 标签来代替传统的 <script…
2020年 08月 30日加速 Vue.js 应用程序的 6 种方法让您的Vue项目程序快如闪电 —如果您曾经使用过 Google 的 Pagespeed Insights 或 Google Lighthouse…
