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

一、框架定位与设计理念

在实际开发中，我们经常会对 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>

✅ 一、基础环境准备

1. 安装 Node.js 和 npm

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

node -v
npm -v