引入NuxtUi

引入NUXT-UI

1，安装 Nuxt UI（含 Tailwind）

yarn add @nuxt/ui tailwindcss

Nuxt UI 会自动集成：@nuxtjs/tailwindcss、@nuxt/icon、@nuxtjs/color-mode，无需单独安装。

2，配置 Nuxt UI

nuxt.config.ts

添加：

// 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 文件

/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

使用Nuxt UI 组件

1，使用Nuxt UI 组件

修改全局组件 app/components/default.vue

<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

<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 字体

yarn add @nuxt/fonts

2，配置 Nuxt fonts 字体

nuxt.config.ts
添加：

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
    }
  }
})

启动项目

yarn run dev

访问 localhost:3000