CodeQi技术小栈-CSDN博客

原创自定义 Hooks 在 Vue3 中的应用和重要性

自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。

2024-07-16 10:27:09 1032

原创【Vue3】4个比较重要的设计模式！！

在我投身于前端开发的职业生涯期间，曾有一次承接了一个大型项目的维护工作。此项目运用的是 Vue 框架，然而其代码结构紊乱不堪，可维护性极度糟糕😫。由此，我开启了对 Vue 设计模式的深度研究之旅，期望能够提升自身的开发水准，让代码更具优雅性、高效性以及良好的可维护性💪。所以，今天给大佬们分享我认为4个vue中比较重要的设计模式！

2024-07-16 10:24:14 1057

原创论 Suspense 组件在 Vue 3 中的重要性

Suspense是 Vue 3 中的新特性，旨在优雅地处理异步组件和数据加载。它允许我们在等待异步操作完成时显示一个备用内容，比如加载动画或者提示信息。当异步操作完成后，再渲染真正的内容。

2024-07-15 11:24:00 743

原创【Vue3】5个非常强大的后台管理项目！开源且免费！

各位大佬，前端开发过程中一定离不开后台管理项目今天给大佬们分享一些非常强大的 Vue 3 后台管理项目。这些项目不仅能帮助你快速搭建后台管理系统，还能为你的开发提供灵感和参考。🚀放心，都是开源且免费的！

2024-07-15 11:22:20 399

原创 Vue 最新动态！！！

当Vue 3.4在六个月前发布时，整个前端开发社区都为之振奋。这次更新不仅带来了许多新特性，还解决了许多开发过程中遇到的痛点。然而，时间飞逝，随着我在项目中不断应用这些新特性，逐渐积累了很多宝贵的经验和心得。今天，我想和大家分享一下这六个月来的使用感受，。😄。

2024-07-13 10:37:10 1006

原创我应该使用 Pinia 还是 Vuex？

Vuex 是 Vue.js 的官方状态管理库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。单一状态树，即一个对象就包含了全部应用层级状态。这个理念使得调试和监控变得简单，因为我们可以轻松追踪状态的变化。Pinia 是 Vue 生态系统中的一匹黑马，它是新一代的状态管理库。Pinia 借鉴了 Vuex 的理念，但提供了更简洁和现代的 API。

2024-07-13 10:34:35 947

原创听说在 Vue 3 中实现动态表单很难？作为一个前端开发者，表示一切都是小意思！！

动态表单是一种允许用户根据需求动态调整表单字段的表单。利用 Vue 3 的响应式特性和组件系统，我们可以轻松实现这一需求。本文将带你从基础概念开始，一步步实现一个支持动态添加、删除和验证的表单，并介绍一些高级技巧。通过本文的介绍，我们从基础到高级详细讲解了如何在 Vue 3 中实现动态表单。我们学习了如何创建和管理动态表单字段，如何进行表单验证，以及如何使用动态组件、持久化数据和结合 Vuex 来增强表单的功能。

2024-07-11 11:02:28 1266

原创一个 Docker 搭建的自动化电视剧下载和管理工具

在这篇文章中，我将详细介绍如何使用 Docker 搭建一个自动化的电视剧下载和管理工具。我们将使用 Sonarr 作为管理工具，通过 qBittorrent 下载剧集，并使用 Nginx 作为反向代理。最终，我们将实现一个可以自动下载、整理和管理电视剧的系统。通过 Docker 和 Docker Compose，我们可以轻松地搭建一个自动化的电视剧下载和管理工具。本文详细介绍了如何配置和运行 Sonarr 和 qBittorrent，并使用 Nginx 作为反向代理实现服务的安全访问。

2024-07-11 11:00:15 1279

原创揭秘 Vue 3 的 Teleport 特性，让你实现跨组件传输内容，使得开发变得更加得心应手！！

在 Vue 3 中，Teleport 是一个新的内置组件，它允许你将子组件或 DOM 元素渲染到指定的 DOM 节点之外。简而言之，你可以将某个组件“传送”到另一个地方，而不必让它们局限于父组件的 DOM 树结构中。通过本文，我们详细介绍了 Vue 3 的 Teleport 特性，从基础用法到高级用法，再到与 Vue Router 的结合。Teleport 为我们提供了一种灵活的方式来处理跨组件内容传输，使得模态框、工具提示等 UI 组件的实现更加简洁和高效。祝你编码愉快！

2024-07-10 09:31:32 980

原创 Vue 3 与 TypeScript：最佳实践详解

在 Vue 3 中，使用 TypeScript 定义组件的 Props 非常简单直观。

2024-07-10 09:27:40 911

原创如何从 Vue 2 无痛升级到 Vue 3，一文搞定！

随着 Vue 3 的发布，许多开发者都面临着从 Vue 2 升级到 Vue 3 的挑战。本文将详细介绍如何从 Vue 2 无痛升级到 Vue 3，包括每个步骤的详细说明与代码示例。让我们开始吧！

2024-07-09 17:47:46 883

原创 Websocket 替代方案：如何使用 Firestore 监听实时事件

Firestore 是 Google Firebase 平台上的一个 NoSQL 文档数据库，支持实时数据同步。Firestore 提供了丰富的功能，包括数据查询、事务、离线支持以及实时监听。通过 Firestore 的实时监听功能，我们可以轻松实现类似 WebSocket 的实时更新效果，而无需复杂的服务器配置。Firestore 提供了简单易用的 API，使得实时数据同步变得非常方便。希望通过本文的介绍，您可以在项目中使用 Firestore 实现实时事件监听，提升用户体验。祝你编码愉快！

2024-07-09 17:45:14 1208

原创使用 Docker 部署一个文档管理系统，让宝贵文档不在丢失!

通过 Docker，我们可以轻松地搭建和管理 BookStack 这种开源文档管理系统。本文介绍了如何克隆 BookStack 仓库，编写 Docker Compose 文件，配置环境变量，启动容器并访问 BookStack。希望通过本文的介绍，您能快速搭建自己的 BookStack 系统。祝你编码愉快！

2024-07-08 10:11:27 653

原创如何大幅减少 Vue.js 中的包大小和加载时间，提升用户体验！

通过遵循以上优化策略，可以显著减少 Vue.js 应用的包大小和加载时间。优化不仅仅是减少文件大小，还包括提高代码的执行效率和资源加载速度。希望通过本文的介绍，您可以更好地优化您的 Vue.js 应用，提升用户体验。祝你编码愉快！

2024-07-08 10:08:56 765

原创免费申请 HTTPS 证书的八大方法

Let's Encrypt 是一个开源的证书颁发机构，由 Internet Security Research Group (ISRG) 运营。它提供免费的 SSL/TLS 证书，并通过自动化工具 Certbot 简化了证书的获取和更新过程。Cloudflare 提供免费的 SSL/TLS 证书以及其他 CDN 和安全服务。使用 Cloudflare 的服务，你可以轻松启用 HTTPS，而无需在服务器上配置证书。ZeroSSL 提供免费和付费的 SSL 证书服务。

2024-07-05 11:21:32 1350

原创 20K Stars！一个轻量级的 JS 库

您可以通过自定义 CSS 来更改 Driver.js 的外观。例如，可以更改弹出窗口的背景颜色和文本样式。Driver.js 是一个强大且高度可定制的 JavaScript 库，用于创建网站或应用程序的引导和教程。通过简单直观的 API 和多种配置选项，您可以轻松地在项目中集成并使用 Driver.js 提供的功能，为用户提供一个引导和教学的友好体验。更多详细信息和高级用法，请参阅 Driver.js 的官方文档。祝你编码愉快！

2024-07-05 11:19:10 588

原创注意！Vue.js 或 Nuxt.js 中请停止使用.value

由于这些变量的值是静态的，并且链接引用了对应路径上存在的静态 Vue 文件，即 URL 路径/lists/posts代表路径 /pages/lists/posts.vue中项目下的静态文件，因此这些变量的值永远不会改变。只选择那些需要响应性的变量，或者值在保持相同路径时可能发生变化的变量（例如，对于 Nuxt.js，我指的是不包括查询字符串的路径，请注意）。还有其他类似情况的变量，它们的值在服务器端或客户端端上永远不会改变，就像上述示例一样，它们可以在声明时排除。然而，有一个简单的解决方法，即使用。

2024-07-04 11:09:39 451

原创轻松搞定Docker！教你一键删除所有镜像!

在本文中，我们学习了如何删除所有 Docker 镜像的方法。首先，我们查看了当前系统上的所有镜像，然后停止了依赖的容器，并最终使用命令行界面删除了镜像。记住，在执行这些操作之前，请仔细检查要删除的镜像，并确保它们不再需要。使用 Docker 可以更高效地管理和部署应用程序，但是必须定期清理不再使用的镜像以减少磁盘占用和维护系统的整洁。通过掌握删除 Docker 镜像的方法，你可以更好地管理你的 Docker 环境，并确保系统的高效运行。祝你编码愉快！

2024-07-04 11:04:09 504

原创摸鱼必备！！10个你不知道的 Vue 3 组件库...

Stellar UI 是一个轻量级的 Vue 3 组件库，专注于简洁和现代的设计。它提供了许多常用的 UI 组件，帮助开发者快速构建漂亮的用户界面。Prefect Design 是一个功能丰富的 Vue 3 组件库，提供了一系列高质量的 UI 组件，适用于各种应用场景。Vuersatile 是一个多功能的 Vue 3 组件库，提供了丰富的 UI 组件和工具，帮助开发者快速构建复杂的应用。Vexip UI 是一个基于 Vue 3 的现代化 UI 组件库，提供了丰富的组件和优雅的设计。

2024-07-03 11:20:42 897

原创 yarn的安装与配置（秒懂yarn用法）

yarn是由Facebook、Google、Exponent和Tilde联合推出的一个新的JavaScript包管理工具。它旨在解决npm的一些性能和安全问题，为开发者提供更好的体验。快速：yarn通过并行化操作来加速包的下载和安装过程。安全：yarn通过校验每个包的完整性，确保安装的包不会被篡改。一致性：yarn使用lock文件来确保每次安装的依赖包版本一致。与npm类似，yarn也支持在文件中定义自定义脚本。例如，你可以定义一个startyarn start。

2024-07-03 11:15:30 1004

原创前端人注意了！Nuxt 的服务器专用组件应该引起你的关注！！

服务器专用组件（Server-only Components）是 Nuxt.js 提供的一种新特性，允许我们定义只在服务器端渲染的组件。这些组件不会在客户端重新渲染，从而减少客户端的 JavaScript 负担，提高性能。SSR（Server-Side Rendering）是指在服务器端生成 HTML 内容，然后发送到客户端。SSR 可以显著提高首屏加载速度和 SEO 效果。Nuxt Island 是 Nuxt.js 团队提出的一种新的渲染模式，旨在将服务器端渲染和客户端渲染有机结合。

2024-07-02 15:04:07 921

原创一场前端框架的“武林大会”，三大主流框架之间的性能比较！！！

Vue.js 是由尤雨溪创建的前端框架。它以其轻量级、渐进式的特点受到广泛欢迎。Vue 的设计理念是让开发者可以逐步采用，从简单的视图层库到复杂的前端框架。其简洁易学的 API 和双向数据绑定，使其成为初学者的理想选择。React 是由 Facebook 开发和维护的前端库，主要用于构建用户界面。React 强调组件化开发，利用虚拟 DOM 提高性能。其单向数据流和声明式编程风格，使其在复杂应用程序的开发中表现出色。

2024-07-02 09:02:03 869

原创以 Vue 3 项目为例，你是否经常遇到 import 语句顺序混乱的问题？要想解决它其实很容易！

通过本文的详细讲解，我们已经学会了如何在 Vue 3 项目中使用 ESLint、Prettier、和来规范 import 语句的顺序。这不仅提升了代码的可读性，还减少了代码提交时的冲突，提升了团队协作效率。我们还进一步优化了 ESLint 配置，并通过 Pre-commit 钩子确保每次提交代码时都能自动格式化 import 语句。看完的朋友可以尝试一下！祝你编码愉快！

2024-07-02 08:59:10 687

原创【Vue 3】如何封装一个超级好用的 Hook！

Hook 是一种将逻辑复用的方式，可以帮助我们将组件中的逻辑提取出来，形成独立的函数。在 Vue 3 中，Hook 通常是指使用setup函数中的组合式 API 封装的逻辑函数。通过 Hook，我们可以在多个组件中复用相同的逻辑，而不需要重复编写代码。以上便是我对如何在 Vue 3 项目中封装一个超级好用的 Hook 的一些心得与体会。希望能够帮助到正在学习和使用 Vue 3 的你。如果有任何疑问或建议，欢迎与我交流。祝你编码愉快！

2024-07-01 16:45:36 397

原创了解这7个微前端框架，摸鱼时间可以大大增加！！

Single SPA 是一个能让你将多个微前端应用组合成一个整体的 JavaScript 框架。它允许你在一个页面中运行多个不同的前端应用程序，并且这些应用程序可以用不同的框架（如 React、Angular、Vue）构建。Qiankun 是一个基于 single-spa 实现的微前端框架，它极大地简化了微前端应用的搭建和管理过程。Qiankun 提供了更多的开箱即用特性，如沙箱机制、样式隔离等。Module Federation 是 Webpack 5 引入的一项功能，它使得模块能够在运行时被加载和共享。

2024-07-01 16:42:47 1340

原创仅花了 1 个小时！！就学会了在＜script setup＞中优雅地定义和使用全局状态管理

除了使用 Vuex 之外，我们还可以通过 Composition API 来定义和管理全局状态。这种方式更加轻量和灵活，适用于中小型项目。在这个部分，我将介绍如何使用reactive和组合函数来实现全局状态管理。首先，在src目录下创建一个store目录，并在其中创建一个文件，用于定义我们的全局状态。

2024-06-29 15:52:09 419

原创以 Vue 3 项目为例，多个请求下如何全局封装 Loading 的展示与关闭？其中大有学问！

#app {

2024-06-29 15:49:13 487

原创 WebKit 简介及工作流程【保姆级教程】

WebKit 是一个开源的网页浏览引擎，它最初是由苹果公司基于 KDE 的 KHTML 和 KJS 库开发的。WebKit 包括 WebCore（渲染引擎）和 JavaScriptCore（JavaScript 引擎）两个主要组件。WebKit 的主要功能是解析 HTML、CSS 和 JavaScript，并将其渲染成可视化的网页。我们可以通过修改 WebKit 的 CSS 解析器来添加自定义 CSS 属性。下面是一个简单的示例，演示如何添加一个名为的 CSS 属性。

2024-06-28 15:55:34 709

原创深入浅出：npm常用命令详解与实践【保姆级教程】

npm全称为 Node Package Manager，是 Node.js 的包管理工具和默认包管理器。包管理：安装、卸载、更新和查看包。依赖管理：自动处理包的依赖关系。脚本运行：通过运行常见任务。包发布：将自己的包发布到 npm 仓库。npm是每个 Node.js 开发者必备的工具，熟练使用它可以大大提升我们的开发效率。通过这篇文章，我们深入浅出地探讨了 npm 的常用命令及其实际应用。从初始化项目、安装和管理依赖，到发布自己的 npm 包，我们系统地了解了 npm 的强大功能。

2024-06-28 15:37:48 989

原创 Postman接口测试工具详解【保姆级教程】

Postman 是一个面向 API 开发人员的强大工具，提供了构建、测试、调试和文档化 API 的完整解决方案。发送请求：支持 GET、POST、PUT、DELETE 等常见 HTTP 方法。组织请求：通过集合（Collection）管理多个请求。环境管理：使用环境变量轻松切换不同的测试环境。自动化测试：编写测试脚本，进行自动化测试。生成文档：快速生成 API 文档。Postman 的用户界面友好，功能强大，几乎是每个 API 开发人员必备的工具。

2024-06-28 15:07:03 1510 1

原创 Vue进阶篇 - Pinia过时了？Vue3新宠揭秘，轻松驾驭状态管理！

在Vue3新项目中，我们可以利用组合式函数和模块化的使用方法，更加简单、灵活地处理组件的状态和逻辑。这使得Pinia等状态管理库可能已经不再必要。通过直接在组件中定义和使用状态，我们可以避免引入额外的库和复杂的配置，简化项目的结构和维护过程。同时，模块化的使用方法使得代码更加模块化、可重用，提升了项目的可扩展性和可维护性。然而，需要注意的是，Pinia等状态管理库仍然适用于某些特定的场景，例如多个组件之间需要共享状态、需要进行跨组件的状态管理等。

2024-06-27 09:37:42 500

原创 Docker精华篇 - 常用命令大全，入门到精通!

我们都知道 Docker 的重要性，以及 Docker 如何在软件开发生命周期中发挥重要作用。说实话，学习 Docker 很有趣，至少在我看来是这样。一旦掌握了基础知识，这并不难。困难的是记住所有这些命令。因此，在这篇文章中，我收集了所有命令，或者更准确地说，收集了所有最常用的命令。它将帮助您记住这些命令并快速参考它们。

2024-06-27 09:27:53 877 2

原创开源项目：一个功能强大的视频下载神器，一键获取网页视频！

猫抓浏览器插件作为一款强大的网页视频下载器，具有简单易用、高效稳定和支持多种格式等特点。它能够帮助我们轻松下载网页上的视频资源，让我们随时随地畅享精彩内容。如果你也经常需要下载网页视频，不妨试试猫抓插件，相信它会给你带来全新的使用体验。祝你编码愉快！

2024-06-27 08:49:44 414

原创低代码到底是前端的 “ 福 ” 还是 “ 孽 ”？？？

低代码是什么？低代码的优点和缺点，应用场景和未来发张，一起探讨下。。。

2024-06-26 17:01:52 443

原创墙裂推荐！每个前端开发人员都必须知道的 8 个 React 组件库！

是一款非常流行的 React 组件库，基于 Google 的 Material Design 设计规范。它提供了一整套丰富的 UI 组件，覆盖了从基本的按钮到复杂的对话框和数据表格等常用组件。Ant Design是由阿里巴巴开发和维护的一款企业级 UI 设计语言和 React 组件库。它提供了一整套开箱即用的高质量 React 组件，适合构建复杂的企业级应用。Chakra UI是一个简单、模块化且可访问的组件库，为构建 React 应用程序提供了一组基于设计系统的 UI 组件。Blueprint。

2024-06-26 15:56:46 1012

前端开发+Vue2、Vue cli、 js+实现B站视频页面滚动开启小屏播放功能+实现源码

空空如也