Nuxt UI Pro
Nuxt UI Pro 是一个包含 Vue 组件、组合式函数和实用程序的集合，**基于 Nuxt UI 构建**，专注于**结构和布局**，并旨在用作**应用程序的构建块**。
它包含可立即使用的模板：仪表板、SaaS、文档 和 登录页面。
Nuxt UI Pro 已获得全球 1,500 多位用户和团队的信赖，我们相信它将帮助您更快、更好地构建您的应用程序，并减少 10 倍的代码量。
模板
您可以使用我们的 最小启动器、我们的官方模板之一，或者按照 安装 指南在您的现有项目中安装 Nuxt UI Pro。
您可以使用 GitHub 上的 使用此模板 按钮创建一个新存储库，或使用 CLI
npx nuxi init -t github:nuxt-ui-pro/dashboard my-dashboard
组件
Nuxt UI Pro 是一个包含 50 多个组件的集合，这些组件可以以多种方式使用。本节将帮助您了解组件的组织方式以及在哪里使用它们。请随时深入了解每个组件的文档，以获取示例和 API 文档。
它**不会注入任何页面或布局**，您需要自己创建它们。这**提供了更大的灵活性**，并允许您按照自己的方式构建应用程序。
布局
让我们从布局组件开始，它们用于使用 页眉、主内容 和 页脚 创建应用程序的结构。大多数情况下，您将在您的 app.vue 中使用它们
<template>
<UHeader />
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<UFooter />
</template>
登录页面
在构建登录页面或任何营销页面时，您很可能需要一个 登录页面英雄 和一些 登录页面部分 来定义结构。
在大多数情况下，使用 ULandingSection 组件就足够了，它包含 title、description、一些 links 和 features，以及一个默认插槽中的图像，例如，其 align 属性设置为 left、center 或 right。
但有时，您可能想添加一些 登录页面徽标、一个包含一些 登录页面卡片 的 登录页面网格、一些 登录页面推荐、一个 登录页面号召性用语，甚至一个 登录页面常见问题解答
<template>
<ULandingHero>
<ULandingLogos />
</ULandingHero>
<ULandingSection>
<ULandingGrid>
<ULandingCard />
<ULandingCard />
<ULandingCard />
</ULandingGrid>
</ULandingSection>
<ULandingSection>
<UPageColumns>
<ULandingTestimonial />
<ULandingTestimonial />
<ULandingTestimonial />
</UPageColumns>
</ULandingSection>
<ULandingSection>
<ULandingCTA />
</ULandingSection>
<ULandingSection>
<ULandingFAQ />
</ULandingSection>
</template>
价格
在构建价格页面时，您很可能需要一些 价格卡片，它们位于一个 价格网格 中，用来显示您的计划，以及一个 价格切换，用来在月度计划和年度计划之间切换
<template>
<ULandingHero>
<template #links>
<UPricingToggle />
</template>
</ULandingHero>
<ULandingSection>
<UPricingGrid>
<UPricingCard />
<UPricingCard />
<UPricingCard />
</UPricingGrid>
</ULandingSection>
<ULandingSection>
<ULandingLogos />
</ULandingSection>
<ULandingSection>
<ULandingFAQ />
</ULandingSection>
</template>
博客
在构建博客时，您很可能需要一个 博客列表 和一些 博客文章 来显示您的文章
<template>
<UContainer>
<UPageHeader />
<UPageBody>
<UBlogList>
<UBlogPost />
<UBlogPost />
<UBlogPost />
<UBlogPost />
<UBlogPost />
</UBlogList>
</UPageBody>
</UContainer>
</template>
页面
此类别包含用于构建页面结构的组件。例如，页面 组件将创建一个包含 10 列的网格，其中 left 和/或 right 插槽为 2 列。您还会发现一个 页面英雄、一个 页面页眉 和一个 页面主体，它们支持 prose。
<template>
<UPageHero />
<UPage>
<UPageHeader />
<UPageBody prose>
<ContentRenderer />
</UPageBody>
</UPage>
</template>
您可能还想添加一个 页面网格 或一个 页面列，其中包含一些 页面卡片，或者添加一些 页面链接，以在内容旁边显示链接列表。
如果您需要显示一个错误页面，可以使用 页面错误 组件
<template>
<UHeader />
<UMain>
<UPage>
<UPageError :error="error" />
</UPage>
</UMain>
<UFooter />
</template>
侧边栏
当您需要显示一个粘性侧边栏时，您可以在 页面 组件的 left 或 right 插槽中使用 侧边栏 组件
<template>
<UPage>
<template #left>
<UAside />
</template>
<slot />
</UPage>
</template>
导航
当您需要在侧边栏中显示一个链接列表时，您可以在 侧边栏 组件的 default 插槽中使用 导航树 组件
<template>
<UPage>
<template #left>
<UAside>
<UNavigationTree :links="links" />
</UAside>
</template>
<NuxtPage />
</UPage>
</template>
身份验证
此类别中唯一的组件是 身份验证表单，您可以使用它来构建您的登录、注册、忘记密码和重置密码页面。
仪表板
此类别包含 15 个以上的组件，用于构建您自己的仪表板，专门设计用于创建一致的外观和感觉。
使用 仪表板布局 组件包装您的布局，并使用 仪表板页面 组件包装您的页面。使用 仪表板面板 组件创建包含一些 仪表板导航栏、仪表板工具栏 和 仪表板侧边栏 的多列布局，响应式布局将自动处理。
<template>
<UDashboardLayout>
<UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
<UDashboardNavbar />
<UDashboardSidebar>
<template #header>
<UDashboardSearchButton />
</template>
<UDashboardSidebarLinks />
</UDashboardSidebar>
</UDashboardPanel>
<slot />
<UDashboardSearch />
</UDashboardLayout>
</template>
内容
如 内容 指南中所述，如果您选择使用 @nuxt/content 来构建您的应用程序，那么 @nuxt/ui-pro 将为您提供一组完全兼容的组件，例如 内容搜索、内容目录 和 内容包围 组件。
您还会发现一些散文组件，可以使用在您的 .md 文件中，使用 MDC 语法，例如 提示、卡片、代码组、选项卡 等。您可以在 散文 类别中找到完整的列表。
颜色模式
颜色模式类别包含组件，用于通过不同的方式在浅色模式和深色模式之间切换，例如 颜色模式按钮、颜色模式切换 和 颜色模式选择器。
如果您在页面中强制使用颜色模式，那么这些组件将自动隐藏
<script setup lang="ts">
definePageMeta({
colorMode: 'dark'
})
</script>
还有一些组件可以轻松显示头像或图像，它们在浅色模式和深色模式下使用不同的 src，例如 颜色模式头像 和 颜色模式图像。