Nuxt3-Vue3

764332025-04-26 10:32

Nuxt3-Vue3

《距离上次在掘金发布文章已经在上次了，哈哈哈！！！🙃🙃🙃》

《掌握api使用即可，因为大部分还是开发思想最重要，只是对Nuxt3的一些API实现记录吧》

《官方文档阅读最重要吧，建议阅读原生的英文！！！》

  • 学习 ssr 的好处:
    • 可以深刻的理解SEO优化具体是如何做的，以及通过配置项来直观的感受到 meta 元数据的配置以及预加载和预获取的实现吧
    • 增加自己的面试竞争力以及快速适应公司业务开发，同时拓展自己本身的技术栈吧
  • nuxt.com/docs/ 官方文档阅读推荐

Nuxt3 创建项目方式

  • 第一种: 使用官方脚手架进行对应的开发模式
    • npx create nuxt <project-name>
    • npx nuxi init <project-name>
  • 第二种直接下载模板解压即可
    • https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3
    • 这种相对较快很多
  • 第三种配置本地 hosts 映射表
    • 185.199.108.133 raw.githubusercontent.com
    • 185.199.108.133:443 raw.githubusercontent.com
    • 测试后，感觉没啥用，推荐使用第二种方案吧

Nuxt3 项目目录结构

  • .nuxt 项目的类型文件生成吧
    • pnpm run prepare 后会生成这个目录
  • .output 项目的编译目录
  • server 项目的服务端目录
  • static 项目的静态资源目录
  • public 项目的公共资源目录
  • nuxt.config.ts 项目的配置文件
  • package.json 项目的依赖文件
  • tsconfig.json 项目的 ts 配置文件
  • app.vue 项目的入口文件

Nuxt3 开发目录整合

  • assets 项目的静态资源目录
  • components 项目的组件目录
  • composables 项目的组合式 API 目录
  • layouts 项目的布局目录
  • middleware 项目的中间件目录
  • pages 项目的页面目录
  • plugins 项目的插件目录
  • server 项目的服务端目录
  • store 项目的状态管理目录
  • types 项目的类型目录
  • utils 项目的工具目录
  • app.vue 项目的入口文件
  • app.config.ts 项目的配置文件
  • nuxt.config.ts 项目的配置文件
  • package.json 项目的依赖文件
  • tsconfig.json 项目的 ts 配置文件

Nuxt3 nuxt.config.ts 配置

nuxt.config.ts runtimeConfig 配置

  • runtimeConfig pnpm run dev 运行时的配置
  • 在组件中使用我们的 useRuntimeConfig 方法获取我们的配置吧
  • 在组件中通过我们的 import.meta.client 和 import.meta.server 判断我们的环境吧
  • 底层使用的是使用 dotenv 来实现获取我们的环境的呐
  • 这样的我们的一些配置的话还可以在 .env 中进行配置的吧
    • 优先级的话是: .env > nuxt.config.ts
typescript 复制代码 
//PAGES
const runtimingConfig: ReturnType<typeof useRuntimeConfig> = useRuntimeConfig()
if (import.meta.server) {
  // Only available on the server
  console.log('This is running on the server')
  console.log('runtimingConfig', runtimingConfig.appKey)
  console.log('runtimingConfig', runtimingConfig.public.appBase)
} else if (import.meta.client) {
  // Only available on the client
  console.log('This is running on the client')
  console.log('runtimingConfig', runtimingConfig.public.appBase)
} else {
  // Available on both the server and the client
  console.log('This is running on both the server and the client')
  console.log('runtimingConfig', runtimingConfig.public.appBase)
}
typescript 复制代码 
//TDOD nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  runtimeConfig: {
    //TODO 定义一些运行时候的全局配置
    appKey: '1234567890',  // server-side can access
    public: {
      //TODO 定义一些公开的全局配置
      baseURL: '/api',  // server-side and client-side can access
    }
  }
})

nuxt.config.ts appConfig 配置

  • 同时该配置和上面的配置一样的，都是具备对应的解决方案吧
  • 可以将对应的配置进行抽取到我们的 app.config.ts 中进行配置的吧
    • defineAppConfig 方法进行定义我们的配置
  • 优先级的话是: app.config.ts > nuxt.config.ts
  • 页面中获取的操作是: useAppConfig 方法
typescript 复制代码 
//Components Page
//TODO 获取AppConfig配置
const appConfig: ReturnType<typeof useAppConfig> = useAppConfig()
console.log('appConfig', appConfig.author, appConfig.title)
typescript 复制代码 
//nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  appConfig: { 
    //TODO 定义应用的一些配置
    title: "vue-nuxt", //TITLE CONFIG
    description: "vue-nuxt", //DESCRIPTION CONFIG
    author: "JUWENZHANG", //AUTHOR CONFIG
    copyright: "vue-nuxt", //COPYRIGHT CONFIG
    keywords: "vue-nuxt", //KEYWORDS CONFIG
    lang: "zh-CN", //LANG CONFIG
  }
})
typescript 复制代码 
//app.config.ts
//TODO 全局app配置文件
export default defineAppConfig({
  title: "vue-nuxt", //TITLE CONFIG
  description: "vue-nuxt", //DESCRIPTION CONFIG
  author: "JUWENZHANG", //AUTHOR CONFIG
  copyright: "vue-nuxt", //COPYRIGHT CONFIG
  keywords: "vue-nuxt", //KEYWORDS CONFIG
  lang: "zh-CN", //LANG CONFIG
  themeColor: {  //TODO 主题色配置
    primary: "#1989fa", //主色
    success: "#07c160", //成功色
    warning: "#ff9900", //警告色
    danger: "#ed3f14", //危险色
    info: "#909399", //信息色
  },
  logo: {  //TODO 项目logo配置
    src: "/logo.png", //logo路径
    alt: "vue-nuxt", //logo描述
  }
})

nuxt.config.ts app 配置

  • 主要是时进行的是对我们的入口文件 app 的配置吧
  • 也就是属性 app 吧
  • 实现的是对我们的网站进行做 SEO 优化在 nuxt 中核心配置吧
  • 主要是配置的是我们的武网页中的 head 中的 meta 元素的配置吧
    • title 标题SEO优化
    • keywords 关键字SEO优化
    • description 描述SEO优化
    • author 作者SEO优化
    • lang 语言SEO优化
    • viewport 视口SEO优化
  • 预获取和预加载
    • 两个都是资源请求方式，都是为了提高我们的网站的性能以及实现一些性能指标的吧，link 标签来实现的吧
    • preload 预加载
      • 是一种声明式的资源请求方式，用于告诉浏览器在页面加载时预先加载资源，以提高页面加载速度。
      • 预加载的资源可以是图片、字体、视频、音频等。
      • 预加载的资源会在页面加载时开始下载，但是不会立即执行，而是在页面加载完成后再执行。
      • 预加载的主要目的是确保关键资源在需要时能够快速可用，减少页面渲染的延迟。
      • 是为了提高我们的首屏加载吧，将FMP的资源今早实现展示吧
    • prefetch 预获取
      • 也是一种资源请求方式，不过它主要用于告诉浏览器在空闲时间去下载未来可能会用到的资源
      • 这些资源通常是用户接下来可能访问的页面或功能所需的资源，预获取的目的是提高后续页面的加载速度。
  • 浏览器缓存策略
    • 预加载和预获取的资源都是会被浏览器进行缓存，并且呐下一次进行访问界面的时候，会直接从缓存中获取资源，而不会再次进行请求的吧
    • 通过缓存策略可以实现降低服务器的负载，提高用户的二次访问速度，减少网络请求的次数，提高页面的加载速度。
  • ssr 中的使用
    • useHead 的使用，可以动态的给我们的每个页面进行添加对应的进行SEO优化的内容吧
      • app的配置和我们的appConfig的配置有一定的不同，是可以进行修改的呐
    • 该配置是可以全局配置的，同时也是可以进行对应的每个pages一个head配置吧
      • 主要是分为我们的全局配置或者说独立性的页面配置吧
  • 优先级配置: elementConfig > useHead > nuxt.config.ts
typescript 复制代码 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  app: {
    head: {
      //TODO TITLE 配置
      title: 'vue-nuxt',
      charset: 'utf-8',
      //TODO META 配置
      meta: [
        { name: 'description', content: 'vue-nuxt' },
        { name: 'keywords', content: 'vue-nuxt' },
        { name: 'author', content: 'JUWENZHANG' },
        { name: 'copyright', content: 'vue-nuxt' },
        { name: 'lang', content: 'zh-CN' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no' },
        { name: 'theme-color', content: '#1989fa' },
        { name: 'apple-mobile-web-app-capable', content: 'yes' },
        { name: 'apple-mobile-web-app-status-bar-style', content: 'black' },
      ],
      //TODO 引入一些全局的样式文件
      link: [
        { 
          rel: 'icon', 
          type: 'image/x-icon', 
          href: '/favicon.ico' 
        },
        //TODO 图片懒加载
        {
          rel: 'preload',
          as: 'image',
          href: '/logo.png',
        },
        //TODO 字体懒加载
        {
          rel: 'preload',
          as: 'font',
          href: '/fonts/iconfont.woff2',
          crossorigin: 'anonymous',
        },
        //TODO 视频懒加载
        {
          rel: 'preload',
          as: 'video',
          href: '/video.mp4',
        },
        //TODO 音频懒加载
        {
          rel: 'preload',
          as: 'audio',
          href: '/audio.mp3',
        },
        //TODO 预获取资源
        {
          rel: 'prefetch',
          as: 'image',
          href: '/logo.png',
        },
        {
          rel: 'prefetch',
          as: 'font',
          href: '/fonts/iconfont.woff2',
          crossorigin: 'anonymous',
        },
        {
          rel: 'prefetch',
          as: 'video',
          href: '/video.mp4',
        },
        {
          rel: 'prefetch',
          as: 'audio',
          href: '/audio.mp3',
        }
      ],
      //TODO 引入一些全局的脚本文件, 可以是 CDN 也可以是本地的文件, CDN 优化吧
      script: [],
      style: [],
    }
  }
})
typescript 复制代码 
const seoConfig: ReturnType<typeof useHead> = useHead({
  title: "76433",
  meta: [
    { name: "description", content: "76433, juwenzhang, 橘子" },
    { name: "keywords", content: "juwenzhang, nuxt, 76433" },
    { name: "author", content: "JUWENZHANG" }
    //...
  ],
  link: [
    { 
      rel: 'icon', 
      type: 'image/x-icon', 
      href: '/favicon.ico' 
    },
    //TODO 图片懒加载
    {
      rel: 'preload',
      as: 'image',
      href: '/logo.png',
    },
    //TODO 字体懒加载
    {
      rel: 'preload',
      as: 'font',
      href: '/fonts/iconfont.woff2',
      crossorigin: 'anonymous',
    },
  ],
  style: [],
  script: [
    {
      head: true,

    }
  ],
})
console.log(seoConfig)

nuxt.config.ts ssr 配置

  • nuxt是默认开启了我们的 ssr 服务端渲染模式的呐
  • 但是也是可以通过自定义来实现对应的决定是否开启的呐: ssr: <boolean> 即可实现设置吧
    • ssr: false 的话就是说明的是是客户端渲染，这个时候我们的SEO获取得到的结果空白，还是以前的 spa 的js来实现渲染内容的呐
    • ssr: true 的话就是说明的是是服务端渲染，这个时候浏览器的SEO获取到的是很多的内容

nuxt.config.ts router 配置

  • 该配置主要是决定我们的前端路由主要是以什么的形式进行的呐
  • 主要是通过 router.options.hashMode: <boolean> 来决定我们前端使用的路由模式的呐
    • 非 hash模式 就是 history模式
    • ssr 服务端渲染的话主要使用的是 history路由模式
typescript 复制代码 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  ssr: true,
  router: {
    options: {
      hashMode: true,  // TODO 使用hash路由模式
      // hashMode: false,  // false的话就是 history 模式的路由配置吧
    }
  }
})

nuxt.config.ts alias 配置

  • 主要实现的是对路径进行别名的配置，任然是为了我们的开发时的提升效率吧
typescript 复制代码 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  alias: {
    "@": "src/",
    "@component": "src/component"
  }
})

nuxt.config.ts css配置

  • 可以指定配置我们的全局CSS样式吧
  • less 和 scss 的预处理器的添加，直接安装: less 和 sass 预处理器即可
    • less 和 scss 的一些高级的语法可以去看看，为自己的开发增加更多的工程化规范（抽离代码有用以及组件库封装亮点之一）
  • css 方案的话还有原子化方案: tailwindcss 或者说 unocss 方案吧
  • CSS工程化方案具备
    • *.module.css 模块化方案
    • less | sass 预处理器方案
      • css 定义变量: --
      • less 定义变量: @
      • sass 定义变量: $
    • tailwindcss | unocss 原子化方案

Nuxt3 中间件

  • 中间件主要是定义在 middleware 目录下的呐
  • 可以定义的一些中间件的话含有:
    • 类型区分: 全局中间件 和 路由中间件 和 局部中间件
    • 在原本的 spa 界面中的话，我们的中间件是通过 router.beforeEach 来实现的对路由进行的守卫拦截
  • 局部中间件定义
    • 主要就是使用我们的 definePageMeta 方法来定义的局部中间件吧，书写位置在 pages 中的每一个 *.vue 页面中
typescript 复制代码 
definePageMeta({
  //TODO 多个中间件的执行顺序就是按照定义的顺序进行执行的呐
  middleware: [
    /**
     * TODO 路由中间件的定义
     * 当然从我们的架构分析的话，这种中间件都是可以往外面进行抽取的呐
     * 毕竟内部就是一个一个简单的callback的回调嘛
     * to 需要前往的路由
     * from 当前路由
     */
    function (to, from) {
      console.log(to)
      console.log(from)
    }，
    /**
     * TODO 第二个中间件定义
     */
    function (to, from) {
      console.log(to)
      console.log(from)
      return //由于已经具备了返回值，所以说后续的中间件就不会执行了呐
      //return abortNavigation() //中止导航，后续的中间件也不会执行了呐
    }
  ]，
  layout: 'default', //TODO 布局组件的定义
  meta: {}, //TODO 页面的元数据的定义
})
  • 具名中间件
    • 主要是通过 defineNuxtRouteMiddleware 方法来定义的中间件吧，书写位置在 middleware 目录下的每一个 *.ts 文件中
typescript 复制代码 
//TODO 鉴权功能中间件
const authMiddleware = defineNuxtRouteMiddleware((to, from) => {
  const token: string = localStorage.getItem('token')
  if (token) {
    if (to.path !== '/login') {
      return navigateTo('/')
    } else {
      return
    }
  } else {
    return abortNavigation()
  }
})

export {
  authMiddleware,
}
  • 全局中间件
    • defineNuxtRouteMiddleware 方法来定义的中间件吧，书写位置在 middleware 目录下的每一个 *.global.ts 文件中
    • 自动化的转化为全局中间件了吧
typescript 复制代码 
export default defineNuxtRouteMiddleware((to, from) => {
  const token: string = localStorage.getItem('token')
  if (token) {
    if (to.path !== '/login') {
      return navigateTo('/')
    } else {
      return
    }
  } else {
    return abortNavigation()
  }
})

Nuxt3 内置组件

SEO组件

  • 不是前面的文档中我们的 app 配置部分主要讲述了关于优先级问题迈
  • 那些对应的就是原生中的: head 元素内部的配置，内部包含我们的: link meta title style script
  • 同时使用 useHead 进行的对应的配置也是一样的呐，也是这样的配置流程吧
  • 同样额外的配置就是通过 elementConfig 的配置实现吧
    • 在 ssr 中每个页面相对独立，又相对耦合吧，每个页面之间具备相同的配置，也具备独立的配置吧
    • Html组件 Body组件 Head组件 Title组件 Meta组件 Style组件 Link组件 NoScript组件 Base组件
    • 注意，我们的 ssr 中是不具备 index.html 的，这个注意一下吧
    • 是通过 hydration 以及 模板字符串 的形式实现动态渲染的

NuxtWelcome组件

  • 该组件就是形成对应的网站欢迎界面的组件吧，是 @nuxt/ui 的一部分

NuxtLayout组件

  • 是Nuxt自带的页面布局组件

NuxtPage组件

  • 是在 Nuxt SSR 项目中的一个路由占位组件吧
  • 该组件就是对 vue-router 中的 router-view组件 进行的进一步的封装完成的吧

NuxtLink组件

  • 就是进行路由切换的组件
  • 该组件就是对我们的 vue-router 中的 router-link 进行的进一步封装吧

ClientOnly组件

  • 指定那些部分内容只在客户端进行渲染

NuxtErrorBoundary组件

  • 就是实现的类似于 REACT 中常谈的 ErrorBoundary 异常捕获组件吧
  • 可以实现对应的 UI降级操作

Nuxt3 layout布局

  • 主要是通过 layouts 目录下的 *.vue 文件来定义的布局组件吧
  • 布局组件的话主要是通过 NuxtLayout 组件来实现的呐
    • 内部具备 name 属性，默认值为 default，来实现动态的决定使用何布局组件的吧
  • 主要就是将网页中公共的部分进行抽取的一个架构设计吧，这个很简单的呐

Nuxt3 渲染模式

  • 浏览器和服务端都是可以实现解析 JavaScript 代码的呐，
    • 都是可以在属于自己的平台实现将React或者Vue代码生成HTML代码的呐，这个过程就是我们的渲染过程了吧
  • 在客户端实现渲染的过程，就是我们的 CSR 客户端渲染模式了吧
  • 在服务端实现渲染的过程，就是我们的 SSR 服务端渲染模式了吧
  • 同时还具备我们的混合渲染模式:
    • SSR | CSR | SSG | SWR | ISR
    • 服务端渲染 | 客户端渲染 | 静态站点生成 | 数据获取策略 | 增量静态重新生成
  • Nuxt3 中出现这样的混合渲染模式主要是因为所有的东西在SSR中进行渲染，反倒不是特别的好，物极必反
    • 所以说这个时候就出现了将一部分内容交给客户端渲染即可，一部分内容交给服务端渲染即可
    • 这样就实现了合理的应用我们的CSR和SSR的混合渲染模式了呐，既满足了我们的SEO优化，又满足了我们的性能优化，实现最终的综合优化
  • 实现的方式: 就是通过配置: nuxt.config.ts 中的 routeRules 来实现的呐
    • routeRules 指定不同pages的渲染模式吧

Nuxt3 plugins插件

  • 创建插件的两种方式:
    • useNuxtApp() 方法来获取全局的应用实例对象
  • 使用插件
    • useNuxtApp().$pinia 方法来获取全局的状态管理实例对象
    • useNuxtApp().$router 方法来获取全局的路由实例对象
    • useNuxtApp().$route 方法来获取全局的路由对象
    • useNuxtApp().$i18n 方法来获取全局的国际化实例对象
    • useNuxtApp().$config 方法来获取全局的配置对象
    • useNuxtApp().$axios 方法来获取全局的 axios 实例对象
    • useNuxtApp().$fetch 方法来获取全局的 fetch 实例对象
    • useNuxtApp().$cookies 方法来获取全局的 cookies 实例对象
    • useNuxtApp().$device 方法来获取全局的 device 实例对象
  • 自定义插件
    • 可以通过 defineNuxtPlugin 方法来定义我们的插件吧
    • 该方法的返回值是一个对象，对象中包含 provide 和 install 两个属性
    • provide 是一个函数，该函数的返回值是一个对象，该对象中包含我们的插件的一些全局的属性和方法吧
    • install 是一个函数，该函数的返回值是一个对象，该对象中包含我们的插件的一些全局的属性和方法吧
  • 定义插件的时候分为两种，一种客户端插件，一种服务端插件
    • *.server.ts 服务端插件
    • *.client.ts 客户端插件
    • 使用的时候需要进行区分对应的环境吧 import.meta 来进行对应的区分吧
typescript 复制代码 
//TODO 自定义插件
export default defineNuxtPlugin(（nuxtApp） => {
  return {
    provide: {
      //TODO 全局属性和方法
      myPlugin: {
        name: 'myPlugin',
        version: '1.0.0',
        author: 'JUWENZHANG',
      }
    },
    install: (app, options) => {
      //TODO 全局属性和方法
      app.config.globalProperties.$myPlugin = {
        name:'myPlugin',
        version: '1.0.0',
        author: 'JUWENZHANG',
      }
    },
  }
})

//components
const nuxtApp: ReturnType<typeof useNuxtApp> = useNuxtApp()
console.log(nuxtApp.$myPlugin)  //TODO use myPlugin

Nuxt3 lifeCycle生命周期

  • nuxtApp.hooks 的定义形式吧
  • 生命周期的话，官网推荐在 plugins 中进行使用吧
  • 和小程序开发就很类似了，生命周期的话具备: 应用的生命周期，页面的生命周期，组件的生命周期
typescript 复制代码 
//TODO setup 的话，已经包含了 beforeCreate 和 created 两个生命周期了呐
const nuxtApp: ReturnType<typeof useNuxtApp> = useNuxtApp()
nuxtApp.hooks.hook('app:beforeCreate', () => {
  //TODO 在应用实例创建之前执行的逻辑
})
nuxtApp.hooks.hook('app:created', () => {
  //TODO 在应用实例创建之后执行的逻辑
})
nuxtApp.hooks.hook('app:beforeMount', () => {
  //TODO 在应用实例挂载之前执行的逻辑
})
nuxtApp.hooks.hook('app:mounted', () => {
  //TODO 在应用实例挂载之后执行的逻辑
})
nuxtApp.hooks.hook('app:beforeUpdate', () => {
  //TODO 在应用实例更新之前执行的逻辑
})
nuxtApp.hooks.hook('app:updated', () => {
  //TODO 在应用实例更新之后执行的逻辑
})
nuxtApp.hooks.hook('app:beforeUnmount', () => {
  //TODO 在应用实例卸载之前执行的逻辑
})
nuxtApp.hooks.hook('app:unmounted', () => {
  //TODO 在应用实例卸载之后执行的逻辑
})

Nuxt3 其他注意点

静态资源问题

  • 资源的存放在 public 目录下，页面引入的话直接使用 public --> / 即可

路由问题

  • 路由组件的定义:
    • 路由组件存放于 pages 目录下的呐，这是规定好了的吧
    • 注意书写路由组件前的话，一定要具备展示路由组件的占位组件: NuxtPage，一般在 app.vue 中占位即可
  • 路由映射关系：
    • pages/index.vue --> domain:port/ 推荐
    • pages/<other>.vue --> domain:port/<other> 不推荐（不利于拓展嵌套路由组件）
    • pages/<other>/index.vue --> domain:port/<other> 推荐
    • pages/<other1>/<other2>.vue --> domain:port/<other1>/<other2> 推荐
    • pages/<[id]>.vue --> domain:port/:id 动态路由
    • pages/<[id]>/index.vue --> domain:port/:id 动态路由
    • pages/<[id]>/<[other]>.vue --> domain:port/:id/:other 动态路由
  • 控制路由跳转方式:
    • NuxtLink 组件来实现路由跳转，使用方法等同于 router-link
      • to active-class href replace target no-prefetch no-referrer external
      • 很多的属性和 a 标签的属性是一致的呐，因为其底层就是通过 a 标签来实现的呐
      • no-prefetch 是指在预加载资源的时候，不进行预加载该路由的资源
      • no-referrer 是指在请求该路由的时候，不携带 referrer 信息，该信息是指当前页面的地址
      • external 跳转 cors 的时候，一定要加上这个属性，否则会报错的呐
    • useRouter 方法实现路由跳转
      • 调用 useRouter hooks 后，可以直接获取全局路由示例对象 router
      • 获取得到该路由对象后，就可以通过该路由对象来实现路由跳转的呐
      • 主要是应用于编程式导航中吧
      • 核心 api：push replace back forward go 和原生的 location api 是类似的呐
    • useRoute 方法实现路由跳转
      • 调用 useRoute hooks 后，可以直接获取全局路由对象 route
      • 可以用来获取当前路由的一些信息，比方说我们的路由参数，路由名称，路由路径，路由元数据等等
      • route.params 获取路由参数
      • route.query 获取路由查询参数
      • route.hash 获取路由哈希值
      • route.fullPath 获取路由完整路径
      • route.matched 获取路由匹配信息
      • route.name 获取路由名称
      • route.path 获取路由路径
      • route.meta 获取路由元数据
      • route.redirectedFrom 获取路由重定向来源
    • navigateTo 实现路由跳转
      • 不推荐使用，不利用进行SEO优化吧
      • 调用方式:
        • navigateTo('/')
        • navigateTo({ path: '/' })
        • navigateTo({ path: '/', query: { id: 1 } })
        • navigateTo({ path: '/', hash: '#top' })
        • navigateTo({ path: '/', replace: true })
        • navigateTo({ path: '/', external: true })
        • navigateTo({ path: '/', noPrefetch: true })
        • navigateTo({ path: '/', noReferrer: true })
        • navigateTo({ path: '/', noScroll: true })
        • navigateTo({ path: '/', noScrollBehavior: true })

编写接口

  • nuxt3 也是支持实现书写属于自己的后端接口的呐
  • 接口的书写位置: server/api 目录下的 *.ts 文件中
  • 这个感兴趣的可以自行探究吧，和 express 或者说 koa 差不多的实现
  • 书写接口的时候先把计算机网络看看比较好吧，以及熟悉 restful 规范吧
  • 在客户端部分的代码调用接口的话可以使用: useFetch 方法来进行发送对应的请求即可吧

nuxt.config.ts 总配置demo

typescript 复制代码 
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  sourcemap: {
    server: true,
    client: true,
  },
  runtimeConfig: {
    //TODO 定义一些运行时候的全局配置
    appKey: '1234567890',  // server-side can access
    public: {
      //TODO 定义一些公开的全局配置
      apiBase: '/api',  // server-side and client-side can access
    }
  },
  app: {
    head: {
      //TODO TITLE 配置
      title: 'vue-nuxt',
      charset: 'utf-8',
      //TODO META 配置
      meta: [
        { name: 'description', content: 'vue-nuxt' },
        { name: 'keywords', content: 'vue-nuxt' },
        { name: 'author', content: 'JUWENZHANG' },
        { name: 'copyright', content: 'vue-nuxt' },
        { name: 'lang', content: 'zh-CN' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no' },
        { name: 'theme-color', content: '#1989fa' },
        { name: 'apple-mobile-web-app-capable', content: 'yes' },
        { name: 'apple-mobile-web-app-status-bar-style', content: 'black' },
      ],
      //TODO 引入一些全局的样式文件
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
        //TODO 图片懒加载
        {
          rel: 'preload',
          as: 'image',
          href: '/logo.png',
        },
        //TODO 字体懒加载
        {
          rel: 'preload',
          as: 'font',
          href: '/fonts/iconfont.woff2',
          crossorigin: 'anonymous',
        },
        //TODO 视频懒加载
        {
          rel: 'preload',
          as: 'video',
          href: '/video.mp4',
        },
        //TODO 音频懒加载
        {
          rel: 'preload',
          as: 'audio',
          href: '/audio.mp3',
        },
        //TODO 预获取资源
        {
          rel: 'prefetch',
          as: 'image',
          href: '/logo.png',
        },
        {
          rel: 'prefetch',
          as: 'font',
          href: '/fonts/iconfont.woff2',
          crossorigin: 'anonymous',
        },
        {
          rel: 'prefetch',
          as: 'video',
          href: '/video.mp4',
        },
        {
          rel: 'prefetch',
          as: 'audio',
          href: '/audio.mp3',
        }
      ],
      //TODO 引入一些全局的脚本文件, 可以是 CDN 也可以是本地的文件, CDN 优化吧
      script: [
        {
          src: ""
        }
      ],
      //TODO 引入一些全局的样式文件, 可以是 CDN 也可以是本地的文件, CDN 优化吧
      style: [],
    }
  },
  ssr: true,
  router: {
    options: {
      hashMode: true,  // TODO 使用hash路由模式
      // hashMode: false,  // false的话就是 history 模式的路由配置吧
    }
  },
  css:[],
  routeRules: {
    //TODO 为所有路由设置默认规则
    '/**': {
      ssr: true,
      headers: {
        'Cache-Control': 's-maxage=1, stale-while-revalidate=59'
      }
    },
    //TODO 为特定路由设置规则
    '/static-page': {
      prerender: true,
      headers: {
        'Cache-Control': 's-maxage=31536000, immutable'
      }
    },
    //TODO 重定向路由
    '/old-page': {
      redirect: '/new-page'
    },
    //TODO 关闭特定路由的服务端渲染
    '/client-only-page': {
      ssr: false
    }
  }
})
  • 官网还有很多有趣的内容，可以自行探究，大部分开发思想的话和原本的 spa 是差不多的
  • 只是在我们的原本的开发基础上新添了一定的内置开发规则罢了（这也是目前技术的有限性的体现吧）
  • 有些功能的完成只能在特定的指定规则下才可以进行对应的开发吧
相关推荐
come1123423 分钟前
Vue 响应式数据传递：ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
前端风云志1 小时前
TypeScript结构化类型初探
javascript
musk12121 小时前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘2 小时前
js代码09
开发语言·javascript·ecmascript
万少2 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL2 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl022 小时前
java web5（黑马）
java·开发语言·前端
Amy.Wang2 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景2 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼2 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
热门推荐
01Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面02手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！03Coze扣子平台完整体验和实践（附国内和国际版对比）04华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南05免费可用！最强AI数字人对口型神器：让照片开口说话唱歌，支持多人对口型+全身动作，1分钟学会！（附保姆级教程）06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解072024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理08C#调用WechatOCR.exe实现本地OCR文字识别09DeepSeek各版本说明与优缺点分析10Coze平台 创建AI智能体的详细步骤指南