## 引入NUXT-UI
### 1，安装 Nuxt UI（含 Tailwind）
```bash
yarn add @nuxt/ui tailwindcss
```
Nuxt UI 会自动集成：@nuxtjs/tailwindcss、@nuxt/icon、@nuxtjs/color-mode，无需单独安装。
### 2，配置 Nuxt UI
```bash
nuxt.config.ts
```
添加：
```js
// nuxt.config.ts
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  modules: ['@nuxt/ui', '@nuxt/icon'], // 注册 Nuxt UI 模块
  css: ['~/assets/css/main.css'] // 引入全局样式
})
```
### 3，创建全局样式（assets/css/main.css）
创建 app/assets/css/main.css 文件
```bash
/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";
```
## 使用Nuxt UI 组件
### 1，使用Nuxt UI 组件
修改全局组件 app/components/default.vue
```js
<template>
  <div class="mt-8 p-6 bg-white rounded-md shadow-md">
    <h3 class="text-lg font-bold mb-2">自动导入的组件</h3>
    <p class="text-gray-600">{{ msg }}</p>
    <div class="mt-4  padding-4">
      <NuxtLink class="text-primary" to="/">首页</NuxtLink>/
      <NuxtLink class="text-primary" to="/about">关于页</NuxtLink>/
      <NuxtLink class="text-primary" to="/contact">联系页</NuxtLink>
    </div>
  </div>
</template>

<script setup>
const msg = "Nuxt4 组件无需导入！"
</script>

<style scoped>

</style>
```
修改 app/pages/index.vue
```js
<template>
  <div class="min-h-screen bg-gray-50 p-8">
    <h1 class="text-3xl font-bold text-center mb-8">DiiBook - Nuxt 4 实战首页</h1>
    <p class="text-center">当前时间：{{ now }}</p>
    <UCard class="mt-12 p-12 flex">
      <h2 class="text-xl font-semibold mb-2">Nuxt UI 卡片</h2>
      <p class="text-gray-600">开箱即用的 110+ 组件，支持暗色模式、图标系统。</p>
    </UCard>
    <br>
      <!-- Nuxt UI -->
    <UButton label="主要按钮" color="primary" class="mr-4" size="md" />
    <UButton label="次要按钮" color="secondary" variant="outline" class="mr-4" />
    <UButton  color="secondary" variant="outline" size="md" class="mr-4"> <UIcon name="i-lucide-check" class="w-3 h-3" />次要按钮 </UButton>
    <UInput placeholder="请输入内容" class="mr-4"  icon="i-lucide-search"/>
    <USelect  :items="items" v-model="value" class="mr-4" />

    <Global />
  </div>
</template>

<script setup lang="ts">
  const now = new Date().toLocaleString()
  const items = ref(['Backlog', 'Todo', 'In Progress', 'Done'])
  const value = ref('Backlog')
</script>

```
##  中国地区无法访问google 下载谷歌字体以及fonts 解决
### 1，下载nuxt/fonts 字体
```bash
yarn add @nuxt/fonts
```
### 2，配置 Nuxt fonts 字体
nuxt.config.ts
添加：
```bash
export default defineNuxtConfig({
  compatibilityDate: '2025-07-15',
  devtools: { enabled: true },
  modules: ['@nuxt/ui', '@nuxt/fonts','@nuxt/icon'], // 注册 Nuxt UI 模块
  css: ['~/assets/css/main.css'], // 引入全局样式
  fonts:{
    providers:{
      google: false,
      googleicons: false
    }
  }
})
```
##  启动项目
```bash
yarn run dev
```
访问 http://localhost:3000
![本地图](./images/nuxt_ui.png)