📝 前言

Tailwind CSS 是一个「实用优先」的 CSS 框架，通过预定义的原子类快速构建界面，无需编写大量自定义 CSS。本教程将详细介绍如何在 RuoYi-Vue3 项目中集成 Tailwind CSS，包括基础配置、常见问题解决方案以及完整的集成流程。

🔧 前置要求

1. Node.js 环境：v14.18+ 或 v16+（Node.js 官网 下载）
2. RuoYi-Vue3 项目：已创建并成功运行的项目
3. npm 或 yarn：确保包管理器可用

前端框架的核心目标是：通过组件化的方式提高开发效率和可维护性。
React 与 Vue 都是当下最主流的前端框架，它们在思想上有相似之处，也存在明显差异。
本文从 设计理念、数据绑定、组件通信、性能优化、生态与学习成本 等方面进行对比。

一、框架定位与设计理念

在JavaScript异步编程领域，async和await是极为重要的语法特性。它们基于Promise和Generator函数，为异步操作提供了更简洁、易读的语法，极大地改善了开发者处理异步任务的体验。本文将深入剖析async和await的原理、执行机制以及实际应用场景。

一、async与await基础概念

async是用于声明异步函数的关键字，它返回的是一个Promise对象。await则只能在async函数内部使用，用于等待一个Promise对象的状态变为fulfilled或rejected ，并获取其结果。示例代码如下：

在实际开发中，我们经常会对 axios 进行统一封装，比如：统一设置请求头、添加 token、全局处理响应错误信息等。本文将介绍如何使用 axios 拦截器，配合 TypeScript 进行请求封装，提高代码的可维护性和复用性。

一、为什么需要封装 axios？

在实际开发中，我们通常需要处理以下问题：

• 每个请求都需要携带 token
• 处理请求失败或权限过期等错误
• 重复的请求配置代码
• 响应数据格式统一解包

引言

在前端开发中，日志管理是调试、监控和优化应用的重要部分。传统的 console.log 方法虽然简单，但缺乏结构化和集中管理的能力。本文将介绍如何使用现有的日志库 pino 在前端项目中实现统一的日志管理，代码设计为通用性强，适用于 Vue、React 等框架，并结合 VuePress 格式展示。

为什么需要日志管理？

• 调试效率：结构化日志便于快速定位问题。
• 用户体验：通过通知提示用户错误。
• 监控与分析：支持本地存储或发送到后端。

引言

在 Vue 3 项目中，有时会发现一个组件（如 Bar.vue）似乎没有显式的 export 语句，却能在其他组件中通过 <Bar /> 直接引用使用。这种现象可能让人困惑。本文将分析其原因，并提供验证和解决方法。

问题背景

假设有一个组件 src/components/Bar.vue，其内容如下：

<template>
  <div>这是一个 Bar 组件</div>
</template>
<script>
  // 没有 export default
</script>

本文将详细介绍如何将使用 VuePress 构建的博客部署到 GitHub Pages 上，包括本地构建、生成静态文件、推送到 gh-pages 分支以及自定义域名绑定等。

一、前提条件

在开始部署之前，请确保你已经完成了以下准备工作：

• 已经搭建好 VuePress 项目并可本地正常访问
• 已将博客项目推送至 GitHub 仓库（如：https://github.com/你的用户名/你的仓库名）
• 安装了 Node.js 和 Git
• 本地可正常构建 VuePress 静态文件

✅ 一、基础环境准备

1. 安装 Node.js 和 npm

前往官网下载 Node.js LTS 版本，安装后终端执行：

node -v
npm -v