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

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

1. 现在，我们可以在 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 布局。