了解如何在您的 Nuxt 应用程序中安装和配置 Nuxt UI。
设置
添加到 Nuxt 项目中
安装 Nuxt UI 包
pnpm add @nuxt/ui
yarn add @nuxt/ui
npm install @nuxt/ui
bun add @nuxt/ui
在您的 nuxt.config.ts 中添加 Nuxt UI 模块
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui']
})
在您的 CSS 中导入 Tailwind CSS 和 Nuxt UI
@import "tailwindcss" theme(static);
@import "@nuxt/ui";
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})
由于
theme(static) 是必需的[email protected]引入了一个仅公开已使用 CSS 变量的重大更改。建议为 VSCode 安装Tailwind CSS IntelliSense扩展并添加以下设置
.vscode/settings.json
"files.associations": {
"*.css": "tailwindcss"
},
"editor.quickSuggestions": {
"strings": "on"
}
使用 App 组件包裹您的应用
app.vue
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
使用我们的 Nuxt Starter
使用nuxt/starter#ui模板启动您的项目，该模板预配置了 Nuxt UI。
通过运行以下命令在本地创建一个新项目
终端
npx nuxi init -t ui <my-app>
<my-app> 参数是将在其中创建项目的目录名称，请将其替换为您的项目名称。安装完成后，导航到您的项目并启动开发服务器
终端
cd <my-app>
npm run dev
选项
您可以通过在您的 nuxt.config.ts 中提供选项来自定义 Nuxt UI。
prefix
使用 prefix 选项来更改组件的前缀。
- 默认值:
U
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
prefix: 'Nuxt'
}
})
fonts
使用 fonts 选项来启用或禁用@nuxt/fonts模块。
- 默认值:
true
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
fonts: false
}
})
colorMode
使用 colorMode 选项来启用或禁用@nuxt/color-mode模块。
- 默认值:
true
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
colorMode: false
}
})
theme.colors
使用 theme.colors 选项来定义用于生成组件主题的动态颜色别名。
- 默认值:
['primary', 'secondary', 'success', 'info', 'warning', 'error']
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
theme: {
colors: ['primary', 'error']
}
}
})
theme.transitions
使用 theme.transitions 选项来启用或禁用组件上的过渡效果。
- 默认值:
true
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css'],
ui: {
theme: {
transitions: false
}
}
})
此选项在具有悬停或激活状态的组件上添加
transition-colors 类。持续发布
Nuxt UI 使用pkg.pr.new进行持续预览发布，使开发者能够即时访问最新的功能和错误修复，而无需等待正式发布。
为所有提交和 PR 创建到 v3 分支的自动预览版本。通过将您的包版本替换为特定的提交哈希或 PR 编号来使用它们。
package.json
{
"dependencies": {
- "@nuxt/ui": "^3.0.0",
+ "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
}
}
pkg.pr.new 将自动在 PR 上评论安装 URL，从而方便测试更改。