结构
了解如何使用 Nuxt UI Pro 结构您的应用程序。
我们只提供最常见用例的示例，但请记住您可以随心所欲地进行操作。让我们从配置应用程序开始，然后看看如何构建一个简单的登陆页面，以及如何与 @nuxt/content 模块集成。
nuxt.config.ts
如果您已按照 安装指南 操作，则您应该已经拥有一个 nuxt.config.ts 文件，其中包含已注册的 @nuxt/ui-pro 层和 @nuxt/ui 模块。我们还将使用一些图标集合来配置 @nuxt/ui 模块，并利用 @nuxt/fonts 来选择我们的字体。
nuxt.config.ts
export default defineNuxtConfig({
extends: ['@nuxt/ui-pro'],
modules: [
'@nuxt/ui',
'@nuxt/fonts'
],
colorMode: {
preference: 'dark'
}
})
app.config.ts
我们现在将创建一个 app.config.ts 文件来配置 primary 和 gray 颜色。我们还将更改页眉高度、默认背景并覆盖一些图标。
app.config.ts
export default defineAppConfig({
ui: {
primary: 'green',
gray: 'slate',
tooltip: {
background: '!bg-background'
},
variables: {
dark: {
background: 'var(--color-gray-950)'
},
header: {
height: '5rem'
}
},
icons: {
dark: 'i-ph-moon-duotone',
light: 'i-ph-sun-duotone',
search: 'i-ph-magnifying-glass-duotone',
external: 'i-ph-arrow-up-right',
chevron: 'i-ph-caret-down',
hash: 'i-ph-hash-duotone'
},
header: {
wrapper: 'lg:mb-0 lg:border-0',
popover: {
links: {
active: 'dark:bg-gray-950/50',
inactive: 'dark:hover:bg-gray-950/50'
}
}
}
}
})
与 Nuxt UI 一样，您将通过 ui 属性配置组件。覆盖组件的键将是其路径，例如 ui.landing.hero 将覆盖 LandingHero 组件。与 Nuxt UI 的唯一区别是配置位于每个组件内部，而不是全局的 ui.config.ts 文件。
您可以使用来自 Tailwind CSS 的任何颜色，在 主题 文档中了解更多信息。
tailwind.config.ts
假设我们想要覆盖 green 颜色以使用 Nuxt 中的颜色，我们可以创建一个 tailwind.config.ts 文件来实现。与任何其他使用 Tailwind CSS 的应用程序一样，您可以在此处覆盖任何 Tailwind 配置。我们还将覆盖 fontFamily 以使用 DM Sans 作为我们的默认字体。
tailwind.config.ts
import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'
export default <Partial<Config>>{
theme: {
extend: {
fontFamily: {
sans: ['DM Sans', ...defaultTheme.fontFamily.sans]
},
colors: {
green: {
50: '#EFFDF5',
100: '#D9FBE8',
200: '#B3F5D1',
300: '#75EDAE',
400: '#00DC82',
500: '#00C16A',
600: '#00A155',
700: '#007F45',
800: '#016538',
900: '#0A5331',
950: '#052e16'
}
}
}
}
}
app.vue
让我们添加一个 app.vue 文件，它将成为我们应用程序的根组件。我们可以使用 Header、Main 和 Footer 组件来构建应用程序的布局。
app.vue
<script setup lang="ts">
const links = [{
label: 'Documentation',
icon: 'i-heroicons-book-open',
to: '/getting-started'
}, {
label: 'Playground',
icon: 'i-simple-icons-stackblitz',
to: '/playground'
}, {
label: 'Roadmap',
icon: 'i-heroicons-map',
to: '/roadmap'
}, {
label: 'Pro',
icon: 'i-heroicons-square-3-stack-3d',
to: '/pro'
}, {
label: 'Releases',
icon: 'i-heroicons-rocket-launch',
to: 'https://github.com/nuxt/ui/releases',
target: '_blank'
}]
</script>
<template>
<UHeader :links="links">
<template #logo>
<Logo class="w-auto h-6" />
</template>
<template #right>
<UColorModeButton />
<UButton icon="i-simple-icons-github" to="https://github.com/nuxt/nuxt" target="_blank" color="gray" variant="ghost" />
</template>
</UHeader>
<UMain>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UMain>
<UFooter>
<template #left>
<p class="text-gray-500 dark:text-gray-400 text-sm">
Copyright © 2016-{{ new Date().getFullYear() }} Nuxt - <NuxtLink class="hover:underline" to="https://github.com/nuxt/nuxt/blob/main/LICENSE" target="_blank">
MIT License
</NuxtLink>
</p>
</template>
<template #right>
<UButton to="https://x.com/nuxt_js" target="_blank" icon="i-simple-icons-x" color="gray" variant="ghost" />
<UButton to="https://discord.com/invite/ps2h6QT" target="_blank" icon="i-simple-icons-discord" color="gray" variant="ghost" />
<UButton to="https://github.com/nuxt/nuxt" target="_blank" icon="i-simple-icons-github" color="gray" variant="ghost" />
</template>
</UFooter>
<UNotifications />
</template>
此示例相当长，但演示了一些可用于自定义应用程序的 props 和 slots。
pages/index.vue
现在，我们可以创建我们的第一个页面。我们将使用 LandingHero 和 LandingSection 组件来构建一个简单的登陆页面。
pages/index.vue
<template>
<div>
<ULandingHero description="Nuxt UI Pro is a collection of premium Vue components built on top of Nuxt UI to create beautiful & responsive Nuxt applications in minutes.">
<template #title>
The <span class="text-primary block lg:inline-block">Building Blocks</span> for Modern Web apps
</template>
</ULandingHero>
<ULandingSection title="The freedom to build anything" align="left" />
<ULandingSection title="The flexibility to control your data" align="right" />
</div>
</template>
这是一个非常简单的示例，因为使用 @nuxt/content 比硬编码内容要容易得多。