网站LOGO
白雾茫茫丶
页面加载中
12月4日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Nuxt3 实战 (四):安装 Nuxt UI 和配置 Typescript 类型检查
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

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

    谢明伟 · 原创 ·
    前端开发Nuxt3 实战 · VueNuxt
    共 2140 字 · 约 1 分钟 · 1307
    本文最后更新于2024年04月08日,已经过了239天没有更新,若内容或图片失效,请留言反馈

    前言

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

    安装 Nuxt UI

    1. 执行安装命令

      powershell 代码:
      pnpm add @nuxt/ui
    2. 添加到 nuxt.config 模块中

      ts 代码:
      export default defineNuxtConfig({
        modules: ['@nuxt/ui']
      })
    3. 需要注意的是,这里 Nuxt UI 会自动安装以下这些模块:
    4. @nuxtjs/tailwindcss
    5. @nuxtjs/color-mode
    6. nuxt-icons

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

    1. 现在,我们可以在 Nuxt 应用中使用所有组件和可组合函数✨,我们在 app.vue 中加入代码:
    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 这个库

    powershell 代码:
    pnpm add @iconify-json/heroicons

    配置 TypeScript

    1. 安装依赖

      powershell 代码:
      pnpm add -D vue-tsc@^1 typescript
    2. 添加到 nuxt.config 配置中

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

    总结

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

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    4

    条评论
    我要发表评论
    1. 头像 闲云
      · · 湖北-武汉
      • 等级:Lv.1
      • 角色:访客
      • 在线:本月
      头像
      闲云
      板凳

      nuxt-ui是要收费的吧,你买了?

      评论
      1. · · 广东-东莞
        • 角色:博主
        • 在线:本月
        头像

        没有,后来发现在玩意太难用了,换成element-ui了 😂

        评论
    2. · · 海外
      • 等级:Lv.1
      • 角色:访客
      • 在线:很久之前
      头像
      沙发

      我的博客就是基于Nuxt UI做的,怎么说呢,这个UI局限性挺大的,还有些不是很理解的限制。
      比如tooltip组件只能在PC用
      比如Slideover组件只能左右
      比如Modal组件会默认给html插入一个padding-right,我知道是防止锁定滚轮时出现html宽度的变化,但是我的滚轮不在Html的情况也插入一个padding...这个锁定还不让设置。
      等等

      评论
      1. · · 广东-深圳
        • 角色:博主
        • 在线:本月
        头像

        嗯...这确实是个问题,实践出真理嘛,过程遇到坑很正常,我先试试,不行再换一套UI,谢谢提醒

        评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 昨天 17:36 在线

    🕛

    本站已运行 2 年 337 天 20 小时 36 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事