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
也没有解决一部分问题。
- 编辑器警告:Unknown at rule @applycss(unknownAtRules)
1<style lang="postcss"> - 要求:正式版需要Node 版本>=16.10.0,如不符合要求,请安装到16.10.0或更高版本:
12sudo npm install -g nsudo 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 文件中进行解析,如:
12199.232.69.194 github.global.ssl.fastly.net140.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
是等效的:
1234567891011121314<template><NConfigProvider inline-theme-disabled :theme-overrides="themeOverrides"><NuxtLayout><NuxtPage /></NuxtLayout></NConfigProvider></template><script setup>const themeOverrides = {common: {primaryColorHover: `var(--primary)`,},}</script>
但并没有包含进度条,进度条颜色的配置为:
1234567createDiscreteApi(["loadingBar"], {loadingBarProviderProps: {themeOverrides: {colorLoading: 'white'}}}) - NButton 样式问题,设置为
type="primary"
背景色却变成白的了,这与 Tailwind CSS 有关,其中设置了
12345678button,[type='button'],[type='reset'],[type='submit'] {-webkit-appearance: button;background-color: transparent;background-image: none;}
一种解决方案是在tailwind.config.js配置文件中添加如下配置关闭 preflight:
123module.exports = {corePlugins: { preflight: false, }}