Headless UI——一个优秀的 Vue 和 React 组件库
自从我开始从事开发工作以来，我一直都在与那些自带设计系统的 UI 组件库（例如 Vuetify、Material Design 等）作斗争。别误会，这些库确实能极大地加快开发速度，但你必须考虑到，在项目开发的某个阶段，你可能会遇到需要层层叠加变通方案才能实现某些功能的情况（尤其是在样式方面）。
我并不喜欢那样。在选择 UI 组件库时，我必须找到最佳匹配——兼顾两者的优势：
- 加快开发速度
- 无需后续创建变通方案来解决问题
这就是为什么我一直在寻找一个能够实现这些功能的UI库，今天我很高兴地宣布，我找到了！它就是Tailwind团队开发的Headless UI 。
这个 UI 库完全满足了我的需求——它提供了未加样式且可以直接使用的 UI 组件，同时我可以根据我的设计需求添加所有样式。
🤔 什么是无头用户界面？
正如描述中所述：
Headless UI is a completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
它包含多个可直接投入生产的组件，这些组件没有样式，开箱即用（更不用说它们也很容易访问）。
如果将 Headless UI 与拥有 50 多个组件的 Vuetify 等库进行比较，它听起来可能并不那么令人印象深刻，但相信我，Headless UI 将为您提供构建自己的组件库的工具，同时加速开发复杂组件，例如单选按钮、自动完成、模态框等等。
请记住，每个组件都可以通过 props 进行自定义，从而提供您所需的功能。查阅每个组件的详细文档后，我成功地从一个无头 UI 组件构建了几个不同的组件。它们与 Tailwind CSS 完美兼容，对我来说，Tailwind CSS 是构建现代 Web 应用的首选解决方案。
🟢 使用您最喜欢的框架实现无头 UI
对我来说，显然会选择 Vue，但 React 的流程也非常相似 ;)
使用方法非常简单——只需按如下方式安装软件包即可：
npm install @headlessui/vue
我们可以立即开始使用这些组件：
<template>
<Switch
v-model="enabled"
:class="enabled ? 'bg-blue-600' : 'bg-gray-200'"
class="relative inline-flex h-6 w-11 items-center rounded-full"
>
<span class="sr-only">Enable notifications</span>
<span
:class="enabled ? 'translate-x-6' : 'translate-x-1'"
class="inline-block h-4 w-4 transform rounded-full bg-white transition"
/>
</Switch>
</template>
<script setup>
import { ref } from 'vue'
import { Switch } from '@headlessui/vue'
const enabled = ref(false)
</script>
我特别喜欢 Headless UI 的一点是，它没有创建自己的界面或组件构建方式。它采用常规框架的方法，例如本例中使用 Vue refs，因此 Vue 开发者可以轻松上手。
接下来的文档章节将指导您完成设置特定状态样式或使用库中更多组件的过程，如下所示：
<template>
<SwitchGroup>
<div class="flex items-center">
<SwitchLabel class="mr-4">Enable notifications</SwitchLabel>
<Switch
v-model="enabled"
:class='enabled ? "bg-blue-600" : "bg-gray-200"'
class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<span
:class='enabled ? "translate-x-6" : "translate-x-1"'
class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
/>
</Switch>
</div>
</SwitchGroup>
</template>
<script setup>
import { ref } from 'vue'
import { Switch, SwitchGroup, SwitchLabel } from '@headlessui/vue'
const enabled = ref(false)
</script>
在上面的示例中，除了常规组件之外，我们SwitchGroup还使用了其他组件来实现我们想要的功能。SwitchLabelSwitch
对我来说，Headless UI 非常重视可访问性这一点也至关重要。因此，每个组件都会提供一个文档，其中Accessibility notes列出了所有推荐的、可使组件更易于访问的设计理念。
🖥️ Alokai 如何使用无头 UI？
在Alokai，我们在少数几个项目中使用了无头 UI，具体如下：
- Storefront UI -> 一个专为电子商务应用程序构建的 UI 组件库，其设计模式与 Headless UI 类似。
- 控制台-> 电子商务应用程序的托管平台
我们非常高兴能够使用 Headless UI。它不仅加速了我们 UI 库和控制台的开发，还避免了被供应商锁定在某个设计系统中，因为 Headless UI 允许你构建自己的组件库🚀
📖了解更多
如果您想了解更多关于 Vue、Nuxt、JavaScript 或其他实用技术的信息，请点击此链接或点击下方图片访问 VueSchool：
它涵盖了构建现代 Vue 或 Nuxt 应用程序时最重要的概念，可以帮助你完成日常工作或业余项目 😉
✅ 摘要
做得好！你刚刚了解了无头UI组件库以及它如何帮助你构建下一个应用程序。
保重，下次见！
祝您编程愉快，一如既往🖥️
文章来源：https://dev.to/jacobandrewsky/headless-ui-a-great-components-library-for-vue-react-4k35