NUXT3项目（大学生搜题网站）实践总结

目录

一、NUXT3实现黑夜白天模式切换

需求

实现

效果

二、scrollreveal插件实现动画效果

需求

实现

封装

使用

文档

效果

三、useSeoMeta的使用

作用

使用

效果

四、NUXT3开启代理

使用

注意

五、$fetch、useFetch 、useAsyncData的区别

六、错误页面处理

使用

代码

效果

网站地址：https://www.itihey.com/

一、NUXT3实现黑夜白天模式切换

需求

实现对网页颜色的整体控制，适配夜晚模式或者其他风格的页面用于迎合更多用户的页面样式多样化的需求。

实现

index.js

import theme from '@/utils/theme'
// 选择主题
const themeChange = (val: boolean) => {
  localStorage.setItem('theme', String(val))
  isDark.value = val
  if (val) {
    currentSkinName.value = 'defaultTheme'
    switchTheme(currentSkinName.value)
  } else {
    currentSkinName.value = 'darkTheme'
    switchTheme(currentSkinName.value)
  }
}
const switchTheme = (type?: string) => {
  type = type || 'darkTheme'
  const colorObj: ColorObject = (theme as { [key: string]: ColorObject })[type];
  Object.keys(colorObj).map(item => {
    document.documentElement.style.setProperty(item, colorObj[item])
  })
}

theme.js

export default {
  // 默认主题
  'defaultTheme': {
    // 主题色
    '--color-primary': '#2966df',
    '--el-color-primary': '#409eff',
    '--el-color-white': '#ffffff',//基础白色,
    // 导航条背景色
    '--navbar-bg': '#ffffff00',
    // 主体背景色
    '--background-color': '#ffffff',
    // banner背景色
    '--banner-bg': '#ffffff00',
    // 主要文字色
    '--text-color': '#000000',
    // 次要文字色
    '--text-color-secondary': '#909399',
    // 最次要文字色
    '--text-color-th': 'rgba(0, 0, 0, 0.3)',
    // 边框色
    '--border-color': '#e3e3e3',
    // 浅边框阴影
    '--border-shadow-shallow': 'rgb(0, 0, 0, 0.2)',
    // 深边框阴影
    '--border-shadow-deep': 'rgb(0, 0, 0, 0.5)',
    '--card-color': '#F8FBFE',
    '--el-color-primary-light-1': '#53a8ff',
    '--el-color-primary-light-2': '#66b1ff',
    '--el-color-primary-light-3': '#79bbff',
    '--el-color-primary-light-4': '#8cc5ff',
    '--el-color-primary-light-5': '#a0cfff',
    '--el-color-primary-light-6': '#b3d8ff',
    '--el-color-primary-light-7': '#c6e2ff',
    '--el-color-primary-light-8': '#d9ecff',
    '--el-color-primary-light-9': '#ecf5ff',

  },
  'darkTheme': {
    '--color-primary': '#2966df',
    '--el-color-primary': '#409eff',
    "--el-color-white": "#ffffff", // 基础白色
    // 导航条背景色
    '--navbar-bg': '#00000000',
    // banner背景色
    '--banner-bg': '#00000070',
    // 主体背景色
    '--background-color': '#262727',
    // 主要文字色
    '--text-color': '#ffffff',
    // 次要文字色
    '--text-color-secondary': 'rgba(255, 255, 255, 0.8)',
    // 最次要文字颜色
    '--text-color-th': 'rgba(255, 255, 255, 0.5)',
    // 边框色
    '--border-color': '#e3e3e3',

    '--card-color': '#011522',
    // 浅边框阴影
    '--border-shadow-shallow': 'rgb(255, 255, 255, 0.2)',
    // 深边框阴影
    '--border-shadow-deep': 'rgb(255, 255, 255, 0.5)',
  }
}

 整个代码的核心在于 document.documentElement.style.setProperty 的这个js方法。

1. 'document' 是JavaScript中表示当前文档的对象。
2. 'document.documentElement' 是文档对象模型中表示HTML文档根元素的对象。
3. '.style' 获取根元素的样式属性对象。
4. '.setProperty(item, colorObj[item])' 是设置根元素样式属性的方法。item 是一个变量，表示要设置的CSS属性名称，而 colorObj[item] 是相应属性的值。

 当然你也可以通过设置更多的主题来达到主题切换的效果。

效果