Nuxt3 实战 (四)：安装 Nuxt UI 和配置 Typescript 类型检查

前言

对于 UI 组件库的选择，我考虑过：Ant Design Vue、Element-Plus，但感觉这两款组件库太偏向业务风格了，现在项目的搭建最好能偏年轻化一点，最后还是选择了：Nuxt UI，主要是 Nuxt UI 是 Nuxt 官方推荐的，而且完美兼容 Nuxt，并且是用 TypeScript 编写的，并为所有组件和可组合函数提供类型。

安装 Nuxt UI

1. 执行安装命令

pnpm add @nuxt/ui

2. 添加到 nuxt.config 模块中

export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

3. 需要注意的是，这里 Nuxt UI 会自动安装以下这些模块：

• @nuxtjs/tailwindcss
• @nuxtjs/color-mode
• nuxt-icons

如果以前安装过它们，则应该将它们从模块和依赖项中删除。

4. 现在，我们可以在 Nuxt 应用中使用所有组件和可组合函数✨，我们在 app.vue 中加入代码：

<template>
  <div class="w-screen h-screen flex justify-around items-center">
    <UButton>Button</UButton>
    <UBreadcrumb :links="links" />
    <Icon
      name="uil:github"
      size="48"
    />
  </div>
</template>
<script setup lang="ts">
const links = [
  {
    label: 'Home',
    icon: 'i-heroicons-home'
  },
  {
    label: 'Navigation',
    icon: 'i-heroicons-square-3-stack-3d'
  },
  {
    label: 'Breadcrumb',
    icon: 'i-heroicons-link'
  }
]
</script>

可以看到 Nuxt UI 的组件和 tailwindcss 的类名都生效了：

如果你遇到 icon 类似的错误，你应该还需要安装 @iconify-json/heroicons 这个库

pnpm add @iconify-json/heroicons

配置 TypeScript

1. 安装依赖

pnpm add -D vue-tsc@^1 typescript

2. 添加到 nuxt.config 配置中

export default defineNuxtConfig({
  // 构建时启动类型检查
  typescript: {
    typeCheck: true
  }
})

总结

到这里，我们的准备工作就完成了，可以在页面组件中使用 Nuxt UI 的组件，后续就可以着手开发页面 Layout 布局。