项目中的插件

babel

babel：Babel 是一个广泛使用的 JavaScript 编译器。它的主要作用是将新版 JavaScript 代码（通常是 ECMAScript 6+，也被称为 ES6+ 或 ES2015+）转换为与旧版 JavaScript 引擎兼容的代码，以确保新特性在旧环境中的正常运行。

项目中的babel.config.cjs 文件用于配置 Babel

Babel 的主要功能和作用包括：
转译新特性： Babel 可以将使用新版本 JavaScript 特性编写的代码，如箭头函数、模板字符串、解构赋值等，转译成 ES5 或其他旧版 JavaScript 的等效代码。这使得你可以使用最新的语言特性，而不必担心浏览器兼容性问题。
模块转译： Babel 也支持转译不同模块系统（如 ES6 模块、CommonJS、AMD 等）之间的代码，从而使你可以在不同环境中共享模块化的代码。
插件系统： Babel 具有丰富的插件生态系统，允许开发者根据需要自定义转译过程。你可以选择性地启用或禁用插件，以适应你的项目需求。
转译 JSX： Babel 可以将 JSX 语法（通常与 React 一同使用）转译为标准 JavaScript。这使得你可以在不同的项目中使用 JSX 而无需担心浏览器是否支持。
扩展语法： Babel 可以根据不同的需求扩展 JavaScript 语法，使其更适应特定领域或项目需求。

1. @vue/babel-plugin-jsx：在 Vue3项目中支持JSX语法的Babel插件
2. @babel/core：是Babel编译器的核心包，负责解析、转换和生成JavaScript代码。本身不包含任何转换规则或插件，需要结合预设和插件来使用
3. @babel/preset-env：是一个智能预设，可以根据你指定的目标环境（如特定版本的浏览器或 Node.js）自动确定需要的 Babel 插件和 polyfill，从而将现代 JavaScript 代码转换为在这些环境中可执行的旧版本 JavaScript 代码

vite插件

1. unplugin-auto-import：自动引入，避免相同依赖的重复引用
2. unplugin-vue-components：组件的自动引入，同时支持类型优化
3. unplugin-icons：按需加载图标，在编译时自动加载图标

JSX插件

1. @vue/babel-plugin-jsx：支持Vue3项目中的JSX
2. @vitejs/plugin-vue-jsx：为Vue3项目提供了对JSX和TSX语法的支持

unocss插件

1.unocss：UnoCSS 是一款轻量级的原子CSS框架，其核心理念是将样式表拆分成最小的可复用单元，即“原子”。

原子化 CSS 的核心思想：

• 独立性：每个类名只做一件事，例如设置颜色、边距或字体大小。
• 复用性：通过组合多个原子类名，可以实现复杂的样式。
• 按需加载：只生成页面中实际使用的 CSS 类名，避免多余的样式

传统 CSS 示例：

/* styles.css */
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

原子化 CSS 示例（使用 UnoCSS）：

<!-- index.html -->
<button class="bg-blue text-white p-2.5 rounded">Click Me</button>

在这个例子中：

• bg-blue 设置背景颜色为蓝色。
• text-white 设置文字颜色为白色。
• p-2.5 设置 padding。
• rounded 设置边框圆角。

2. @unocss/preset-icons：是UnoCSS的一个预设插件，简化和统一图标的使用
3. @unocss/preset-rem-to-px：是UnoCSS的一个预设插件，它的主要作用是将CSS中的rem单位转换为px单位