Vue3+Vite4安装使用UnoCSS

前言

在说Vue3安装UnoCSS使用之前先说关于什么是UnoCSS，有什么优势等。

什么是CSS原子化

在前端开发中，CSS原子化（Atomic CSS）是一种设计和编写CSS样式的方法论。它的核心思想是将样式属性拆分为独立的、可重用的类名，每个类名仅定义一个样式属性。

优点

1.减少了css体积，提高了css复用

2.减少起名的复杂度

3.增加了记忆成本 将css拆分为原子之后，你势必要记住一些class才能书写，哪怕tailwindcss提供了完善的工具链，你写background，也要记住开头是bg

原子化CSS的好处之一是提供了高度的可重用性。通过将样式属性拆分为独立的类名，我们可以根据需要组合这些类名来构建所需的样式。这种模块化的方法使得样式的管理和维护更加简单，也更容易实现样式的复用。例如，如果我们有一个名为.text-center的类，它定义了文本居中对齐的样式，我们可以在需要时将其应用于任何元素。

原子化CSS还有助于减小样式表的大小。由于每个类名只定义一个样式属性，因此样式表中的类名数量相对较多，但每个类名的定义相对较短。这可以帮助减小样式表的大小，从而加快加载时间和提升性能。

另一个原子化CSS的优势是可预测性。由于每个类名只定义一个样式属性，类名与样式的关联非常明确。这使得在查看HTML元素的类名时，可以直观地了解它们应用的样式。这也使得在不破坏其他样式的情况下，可以更方便地添加或移除特定样式

缺点

原子化CSS并不适用于所有情况。在某些情况下，它可能会导致样式的冗余和维护的困难。如果我们有大量的独立样式属性需要定义，使用原子化CSS可能会