了解如何在 Nuxt 应用程序中安装和配置 Nuxt UI。
设置
添加到 Nuxt 项目
安装 Nuxt UI 包
pnpm add @nuxt/content
yarn add @nuxt/content
npm install @nuxt/content
bun add @nuxt/content
在 nuxt.config.ts 中添加 Nuxt UI 模块
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content']
})
在 CSS 中导入 Tailwind CSS 和 Nuxt UI
@import "tailwindcss";
@import "@nuxt/ui";
export default defineNuxtConfig({
modules: ['@nuxt/content'],
css: ['~/assets/css/main.css']
})
建议为 VSCode 安装 Tailwind CSS IntelliSense 扩展并添加以下设置：
.vscode/settings.json
{
"files.associations": {
"*.css": "tailwindcss"
},
"editor.quickSuggestions": {
"strings": "on"
},
"tailwindCSS.classAttributes": ["class", "content"],
"tailwindCSS.experimental.classRegex": [
["content:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
]
}
使用 App 组件包裹您的应用程序
app.vue
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
使用我们的 Nuxt 启动器
使用预配置了 Nuxt UI 的 nuxt/starter#ui 模板开始您的项目。
通过运行以下命令在本地创建新项目：
Terminal
npm create nuxt@latest -- -t content
<my-app> 参数是项目将被创建的目录的名称，请将其替换为您的项目名称。安装完成后，进入您的项目并启动开发服务器：
Terminal
cd <my-app>
npm run dev
选项
您可以通过在 nuxt.config.ts 中提供选项来自定义 Nuxt UI。
prefix
使用 prefix 选项更改组件的前缀。
- 默认值:
U
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content'],
css: ['~/assets/css/main.css'],
ui: {
prefix: 'Nuxt'
}
})
fonts
使用 fonts 选项启用或禁用 @nuxt/fonts 模块。
- 默认值:
true
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content'],
css: ['~/assets/css/main.css'],
ui: {
fonts: false
}
})
colorMode
使用 colorMode 选项启用或禁用 @nuxt/color-mode 模块。
- 默认值:
true
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content'],
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/content'],
css: ['~/assets/css/main.css'],
ui: {
theme: {
colors: ['primary', 'error']
}
}
})
theme.transitions
使用 theme.transitions 选项启用或禁用组件上的过渡。
- 默认值:
true
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/content'],
css: ['~/assets/css/main.css'],
ui: {
theme: {
transitions: false
}
}
})
此选项在具有悬停或活动状态的组件上添加
transition-colors 类。持续发布
Nuxt UI 使用 pkg.pr.new 进行持续预览发布，为开发者提供即时访问最新功能和错误修复，而无需等待官方发布。
v3 分支的所有提交和拉取请求都会创建自动预览发布。通过将您的包版本替换为特定的提交哈希或拉取请求号来使用它们。
package.json
{
"dependencies": {
- "@nuxt/ui": "^3.0.0",
+ "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
}
}
pkg.pr.new 将自动在拉取请求上评论安装 URL，从而轻松测试更改。