Skip to content

NuxtUI

· 5 min

这是 Nuxt 官方推出的组件库，该组件库主要基于 tailwindcss 和 HeadlessUI 来构建 Vue 组件。

TailwindCSS#

这是一个原子类的 css 库，也是当年最火的项目。一句话概括，那就是将常用的样式声明写成了类的形式，之后基本不用再写单独的样式声明，只需要在 html 标签上挂类就好了。

在 TailwindCSS 这种原子类流行之前，比较流行 bootstrap 这样的样式库，同样也是提供了很多样式类。例如在 bootstrap 中书写一个 button 按钮：

<button class="btn btn-primary">点击</button>

但是如果是使用 tailwindcss 来写，则是这样的：

<button
  class="bg-blue-500 hover:bg-blue-600 focus:bg-blue-700 focus:ring-4 focus:ring-blue-300 focus:ring-opacity-50 text-white font-bold py-2 px-4 rounded"
>
  点击
</button>

大家可以去 TailwindCSS 官网 看一下这个库所提供的原子类，每个样式类真的就只有一两条样式声明。

  • 优点：可定制性更高
  • 缺点：上手需要时间，仿佛回到刚学 css 的时候

思考🤔：为什么现在流行这种 css 解决方案？特别是刚开始接触 tailwindcss 的人，并没觉得这个有多特别，怎么一下子就火了呢？

现代前端框架都有一个特点：数据状态来驱动视图

<template>
  <div :class="test"></div>
</template>


<script setup>
const test = ref({
  a: true,
  b: true,
  c: false,
})
</script>

HeadlessUI#

HeadlessUI，其实也是一个组件库。早期开发的时候，可能更多的接触的是诸如 ElementUI、Antd 这一类的组件库，这一类组件库我们可以称之为传统组件库。那么传统组件库有什么问题呢？

  1. 样式难以重置
  2. 需要等待官方的维护
  3. 历史包袱重

正因为这些遗留的问题存在，所以逐渐出现了 Headless 类型的组件库。所谓 Headless，指的是将用户界面（UI）的逻辑与显示层（视图层）解耦的组件库或工具。这类工具通常只提供功能逻辑和无样式的原始 html 结构，而不包含具体的视觉样式，让开发者可以完全自由地定制外观。其特点如下：

  1. 无样式
  2. 高可定制性(主要指的是样式方面)
  3. 专注于功能逻辑

常见的 Headless 组件库有：

  • HeadlessUI : 这是 tailwind labs 开发的 HeadlessUI 库，支持 React 和 Vue，提供了诸如模态框(Dialog)、下拉菜单(Menu)、切换开关(Switch)、Tab组件(Tabs)，需要开发者为这些组件编写样式。
  • RadixUI : 强大的 HeadlessUI 库，支持复杂交互逻辑和无障碍设计。提供的组件有弹出层(Popover)、菜单(Dropdown Menu)、工具提示(Tooltip)等，完全没有样式。

NuxtUI#

有了前面的前置知识，接下来要理解 NuxtUI 就非常简单了。正如 NuxtUI 官网的介绍：

Nuxt UI is a module that provides a set of Vue components and composables built with Tailwind CSS and Headless UI to help you build beautiful and accessible user interfaces.

NuxtUI 其实就是基于 TailwindCSS 和 HeadlessUI 这两个目前所流行的技术所构建的组件库，分为两套：

  • NuxtUI
    • 开源免费： NuxtUI 是一个开源的组件库，提供了 40 多个基础组件，供开发者免费使用。
    • 基础组件： 这些组件相对简单，适用于一般的 UI 需求，帮助开发者快速搭建应用的基本界面。
  • NuxtUI Pro
    • 高级组件： 在 Nuxt UI 的基础上，Nuxt UI Pro 提供了额外的 50 多个高级 Vue 组件，这些组件更复杂，功能更丰富，适用于构建更复杂的界面和布局。
    • 丰富的模板： Nuxt UI Pro 包含可立即使用的模板，如仪表板、SaaS、文档和登录页面，帮助开发者快速启动项目。
    • 付费授权： 虽然在开发环境中可以免费试用，但在生产环境中使用需要购买授权。授权分为 Solo 和 Team 两种，主要区别在于可邀请的开发者数量。

这里我们看一下 NuxtUI 就好了。

如果是一个已有的项目，那么通过下面的命令来添加 NuxtUI：

Terminal window
npx nuxi@latest module add ui

在 nuxt.config.ts 中配置：

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
})

如果是要初始化一个新项目，那么可以通过命令：

Terminal window
npx nuxi@latest init -t ui