跳到主要内容

Nuxt基础

  • Nuxt.js是一个基于Vue.js的通用应用框架

  • 预设了利用Vuejs开发服务端渲染所需要的各种配置

  • 提供静态站点

  • 异步数据加载

  • 中间件支持

  • 统一规范目录结构

  • 支持自动生成动态路由

  • 集成eslint、prettier、lint staged

  • nuxt不会一开始加载所有资源，而是当页面可视区域呈现出来的时候，才去加载对应的资源

项目配置​

  • 1、使用create-nuxt-app脚手架创建项目
  • 2、nuxt应用工程目录 【nuxt没有src目录，所有的目录都在放在根目录中】
    • layouts
      • 布局视图，承载page页面
    • pages
      • 页面，用于动态生成路由
    • components
      • 业务组件
    • middleware
      • 中间件模块
    • assets
      • 预编译资源 ，如scss、图片
      • 小于1k的图片，会自动转换base64处理
    • static
      • 静态资源

常用配置​

  • css
    • 用于定义页面的全局样式
  • $production、$development
    • 配置环境变量
  • runtimeConfig
    • 用于在应用程序中公开环境变量和私有令牌
    • 需要在服务器上访问的变量直接添加到runtimeConfig中。需要在客户端和服务器上访问的变量在runtimeConfig.public中定义
  • nitro
    • Nuxt 使用 Nitro 作为其服务器引擎
    • 服务器引擎: 负责处理请求、渲染响应和处理其他后端逻辑
javascript
export default defineNuxtConfig({
     css: [
        'assets/global.less'
     ],
    runtimeConfig:{
        // 服务端可用
        apiSecret: '123',
    }，
   nitro: {
      preset: 'vercel'  // 使用vercel部署
   }
})

异步数据​

  • Nuxt扩展了vue方法，Nuxt增加asyncData的方法，可以在设置组件的数据之前异步获取数据和处理数据
  • @nuxtjs/axios

asyncData​

asyncData方法asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象，你可以利用asyncData方法来获取数据，Nuxt.js会将asyncData返回的数据融合组件data方法返回的数据一并返回给当前组件

js
export default {
   asyncData: ({$axios,store}) =>{
       return {
           data:'test'
       }
   }
   components:{...} 
}

数据获取​

  • Nuxt 带有两个可组合函数和一个内置库，用于在浏览器或服务器环境中执行数据获取：useFetch，useAsyncData 和 $fetch

pm2配置​

可以在服务器托管 Nuxt 应用程序

  • 要使用pm2 ，需要在根目录使用ecosystem.config.cjs
js
module.exports = {
  apps: [
    {
      name: 'NuxtAppName',
      port: '3000',
      exec_mode: 'cluster',
      instances: 'max',
      script: './.output/server/index.mjs'
    }
  ]
}

常用api​

  • useAsyncData
  • useFetch
  • useHead
  • useCookie
    • 读取和写入cookie
  • useRuntimeConfig
    • 访问运行时配置变量
  • useNuxtApp
    • 访问程序的应用实例

nuxt生命周期​

  • 客户端执行
    • onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted
      • 由于服务器端没有动态更新且不涉及 DOM 操作。因此在SSR服务端渲染期间onBeforeMount、onMounted等等hooks不会执行
  • 服务端执行
    • setup、useAsyncData、useFetch、onServerPrefetch

nuxt 别名​

  • 别名： ~ 、 @、 ~~ 、 @@
别名代表路径
~项目根目录（Root Directory）
@同 ~，也指项目根目录
~~Nuxt 根目录（Mono repo 下可能不同）
@@同 ~~

自动导入​

  • Nuxt 自动导入组件、组合式函数、辅助函数和 Vue API

    • components： Nuxt 会自动导入该目录中的所有组件

      • components/AppHeader.vue 解析为: <AppHeader />

      • 支持嵌套目录，如components/base/foo/Button.vue

        • 组件会被解析为： <BaseFooButton />

  • 第三方包自动导入：使用了 Nuxt 模块，nuxt会自动导入

显式导入​

  • Nuxt 提供了 #imports 别名，可以用来显式导入每个自动导入的内容：

eslint报错解决​

  • 虽然已经nuxt自动导入了，到时eslint可能会报错如 'useLocalePath' is not defined.eslintno-undef
  • ESLint 并不知道这些是由 Nuxt 自动导入的函数

解决:

  • 1、需要在eslint配置中，引入tsconfig的配置

路由​

  • 页面路由
  • API路由

双端执行机制​

  • 在服务端渲染模式下，代码会经历以下两个阶段：
    • 1、服务端执行
      • 当用户请求页面时，Nuxt 会在服务端运行代码生成 HTML
    • 2、客户端执行：
      • 服务端返回HTML结构，客户端会加载HTML

因此以下代码都会执行

js
<script lang="ts">
if (import.meta.server) {
  console.log("服务端渲染");
} else {
  console.log("客户端渲染");
}
</script>
  • 如果希望某段代码，只在某一端执行，可以通过只在客户端运行的api 、只在服务端运行的api

client-api​

  • 浏览器相关api
  • 使用状态的生命周期
    • 因为状态的生命周期，依赖于DOM环境和浏览器特性，而服务端没有这些环境
    • 比如onMounted
  • 添加交互性和事件侦听器

server-api​

  • asyncData

客户端、服务端运行的 API​

  • useFetch
  • useAsyncData
  • useRuntimeConfig
    • 公共部分 (public) 在服务端和客户端都可用。
    • 私密部分 (private) 只能在服务端使用。

主题切换​

基于tailwind​

  • 自定义css变量
  • 配置tailwind文件，定义变量，引入自定义css变量
vue
<template>
  <div>
    <div class="flex flex-col space-y">
      <button class="" @click="() => changeTheme('light')">白天主题</button>
      <button @click="() => changeTheme('dark')">黑夜主题</button>
    </div>
    <div class="text-primary">css变量，自定义颜色</div>
  </div>
</template>

<script lang="ts" setup>

const changeTheme = (theme: string) => {
  document.body.classList.remove("light", "dark");
  document.body.classList.add(theme);
};

// 初始化
useHead({
  bodyAttrs: {
    class: "light",
  },
});
</script>