Nuxt 3和Naive UI踩坑及经验分享 | Alan Hou的个人博客

Nuxt为Nuxt3启用了全新域名https://nuxt.com/（原域名为https://nuxtjs.org/），Alan没有深度使用过Nuxt 2，但变化应该还是比较大的，因为Nuxt 3正式版与之前的beta版本都有不小的变化。选择Nuxt 的主要原因应该都是SEO吧，毕竟官方的SSR方案尤雨溪自己都说不完善。当然对于的约定大于配置的理念也是褒贬不一。

Nuxt 3和Naive UI踩坑及经验分享

同时虽然针对Vue 3也有Element Plus，但似乎Naive UI的呼声更高些，虽然本文主要记录的是这两者的相关信息，同时如果在使用Tailwind CSS中遇到问题的话也会记录于此（Windi CSS已不在维护，但实际上两者在使用大同小异）。同样这种Atomic/Utility-First CSS也具有争议，但作为一个非专业前端我觉得使用起来还不错，毕竟和Semantic CSS也不冲突，有洁癖的用@apply也没有解决一部分问题。

编辑器警告：Unknown at rule @applycss(unknownAtRules)

<style lang="postcss">

1

<style lang="postcss">
要求：正式版需要Node 版本>=16.10.0，如不符合要求，请安装到16.10.0或更高版本：

sudo npm install -g n sudo n v16.10.0

1
2

sudo npm install -g n
sudo n v16.10.0

这样本地可维护多个NodeJS版本，通过n进行版本的切换，也可使用 nvm 进行多版本的管理
could not fetch remote https://github.com/nuxt/starter
GitHub 在国内的访问不稳定，现在常规操作是访问https://ipaddress.com/然后分别查询github.global.ssl.fastly.net和github.com的 IP 地址，再在 hosts 文件中进行解析，如：

199.232.69.194 github.global.ssl.fastly.net 140.82.113.4 github.com

1
2

199.232.69.194 github.global.ssl.fastly.net
140.82.113.4 github.com
Cannot restart nuxt: [@nuxtjs/i18n]: The vueI18n option is no longer be specified with object.
vueI18n已被废弃，已需再配置，但当前仍可通过在其后接一个相对路径地址添加配置。更多详情请参见https://v8.i18n.nuxtjs.org/guide/migrating/#change-the-route-key-rules-in-pages-option

Naive UI加载进度条如何做自定义配置
普通的自定义配置在官方文要有详细说明（参见https://www.naiveui.com/en-US/os-theme/docs/customize-theme），比如配置悬浮后的颜色，这里顺便使用的var(--primary)，其中--primary为配置的全局变量，方便进行全局主题色的的设置（Alan放在assets/css/_variables.css中），另Nuxt中NConfigProvider和n-config-provider是等效的：

<template>
  <NConfigProvider inline-theme-disabled :theme-overrides="themeOverrides">
    <NuxtLayout>
      <NuxtPage />  
    </NuxtLayout>  
  </NConfigProvider>
</template>
<script setup>
const themeOverrides = {
  common: {
    primaryColorHover: `var(--primary)`,
  },
}
</script>

</NuxtLayout>

</NConfigProvider>

</template>

const themeOverrides = {

common: {

primaryColorHover: `var(--primary)`,

}

</script>

但并没有包含进度条，进度条颜色的配置为：

createDiscreteApi(["loadingBar"], {
        loadingBarProviderProps: {
          themeOverrides: {
            colorLoading: 'white'
          }
        }
      })

createDiscreteApi(["loadingBar"], {

loadingBarProviderProps: {

themeOverrides: {

colorLoading: 'white'

}

})

NButton 样式问题，设置为type="primary"背景色却变成白的了，这与 Tailwind CSS 有关，其中设置了

button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none; }

1
2
3
4
5
6
7
8

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

一种解决方案是在tailwind.config.js配置文件中添加如下配置关闭 preflight：

module.exports = { corePlugins: { preflight: false, } }

1
2
3

module.exports = {
  corePlugins: { preflight: false, }
}

Hi，您需要填写昵称和邮箱！