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

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

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

1. 编辑器警告：Unknown at rule @applycss(unknownAtRules)
   
   <style lang="postcss"> # 方法二 # .vscode/settings.json { "css.customData": [ ".vscode/tailwind.json" ] } # .vscode/tailwind.json { "version": 1.1, "atDirectives": [ { "name": "@tailwind", "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" } ] }, { "name": "@apply", "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#apply" } ] }, { "name": "@responsive", "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" } ] }, { "name": "@screen", "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#screen" } ] }, { "name": "@variants", "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", "references": [ { "name": "Tailwind Documentation", "url": "https://tailwindcss.com/docs/functions-and-directives#variants" } ] } ] }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

   <style lang="postcss">     # 方法二 # .vscode/settings.json {   "css.customData": [     ".vscode/tailwind.json"   ] } # .vscode/tailwind.json {   "version": 1.1,   "atDirectives": [     {       "name": "@tailwind",       "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",       "references": [         {           "name": "Tailwind Documentation",           "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"         }       ]     },     {       "name": "@apply",       "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",       "references": [         {           "name": "Tailwind Documentation",           "url": "https://tailwindcss.com/docs/functions-and-directives#apply"         }       ]     },     {       "name": "@responsive",       "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",       "references": [         {           "name": "Tailwind Documentation",           "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"         }       ]     },     {       "name": "@screen",       "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",       "references": [         {           "name": "Tailwind Documentation",           "url": "https://tailwindcss.com/docs/functions-and-directives#screen"         }       ]     },     {       "name": "@variants",       "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",       "references": [         {           "name": "Tailwind Documentation",           "url": "https://tailwindcss.com/docs/functions-and-directives#variants"         }       ]     }   ] }

2. 要求：正式版需要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 进行多版本的管理
3. 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

4. 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
5. 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>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

   
   但并没有包含进度条，进度条颜色的配置为：
   
   createDiscreteApi(["loadingBar"], { loadingBarProviderProps: { themeOverrides: { colorLoading: 'white' } } })

   1 2 3 4 5 6 7

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

6. 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, } }

7. 保留父主组件中设置的样式：v-bind="$attrs"(透传 Attributes)
8.  保留日志行数配置：VSCode打开 Preferences > Settings搜索设置Scrollback
9. nuxtjs-naive-ui导致打包后出现500错误，日志Named export 'VLazyTeleport' not found，解决办法，在nuxt.config.ts中配置，或将@css-render/*及css-render升级至0.15.14或以上：
   
   build: { transpile: process.env.NODE_ENV === 'production' ? ['vueuc'] : [] }

   1	build: { transpile: process.env.NODE_ENV === 'production' ? ['vueuc'] : [] }

10. The requested module ‘node:events’ does not provide an export named ‘addAbortListener’
    Node 使用20或以上版本
11. 子组件翻页问题：我们可以通过封装获取 route.query 或 route.param 中的值来处理翻页问题，但对于子组件，如评论等，当然可以选择通过父组件传入，但若要保持独立，则会略有些复杂，Nuxt 所提供的 useFetch 提供了 watch 参数来监测组件内变量的变化并自动执行刷新，但这并不能解决问题，因为它会一直使用初始值，文档中明确说到
    If you need to change the URL based on a reactive value, you may want to use a computed URL instead.
    所以我们需要使用类似如下代码动态计算请求 URL：
    
    const page = ref(1); // 动态计算请求 URL const computedUrl = computed(() => `/api/data?page=${page.value}`); // 假定封装了 useHttp 的 Composable, 也可以直接使用 useFetch const { data } = useHttp(computedUrl, { watch: [page], // Include dependencies for reactivity });

    1 2 3 4 5 6 7 8 9

    const page = ref(1);   // 动态计算请求 URL const computedUrl = computed(() => `/api/data?page=${page.value}`);   // 假定封装了 useHttp 的 Composable, 也可以直接使用 useFetch const { data } = useHttp(computedUrl, {   watch: [page], // Include dependencies for reactivity });