Nuxt 3 - 入门

目录

• 服务端渲染
• Hello World
• 基于文件系统的路由
• 设置SEO标题

服务端渲染

SPA和SSR是什么？

• SPA(Single Page Application) 单页面应用，在客户端通过js动态地构建页面
• SSR(Server-Side-Rendering) 服务器端渲染，在服务器端生成HTML页面并发送给客户端

有什么不同？

• SPA的特点是页面切换流畅，动态渲染变化的部分，用户体验好，但是对搜索引擎的支持不够友好，爬虫无法抓到HTML中的数据
• SSR的特点是对搜索引擎好，可以提高页面首次加载速度和SEO，但是页面切换可能不够流畅，因为每次都是请求一个完整的HTML页面。

Nuxt 是什么？

Nuxt 框架提供了一种基于Node.js 的服务端渲染方案SSR, 可以让vue 应用在服务器端进行渲染，从而提高页面的加载速度和 SEO

Nuxt 框架优势？

• Nuxt 采用了混合的架构模式，同时支持SSR和SPA
• SSR 服务端渲染： 首次访问页面，Nuxt.js在服务器端执行 Vue组件的渲染过程，并生成初始HTML
• SPA 客户端渲染： 一旦初始HTML被送到浏览器，Vue.js 会接管页面，后续的页面切换则使用SPA的方式进行
• Nuxt 框架优势： 兼顾了SSR 和 SPA的优点

Hello World

1.创建项目

npx nuxi@latest init my-bilibili

问题1.：

[下午3:54:05]  ERROR  Error: Failed to download template from registry: request to https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json failed, reason: getaddrinfo ENOENT raw.githubusercontent.com

解决：host加入以下配置

185.199.108.133 raw.githubusercontent.com

问题2:
node.js 版本太老：

WARN  Current version of Node.js (14.16.1) is unsupported and might cause issues.                           下午3:54:04       Please upgrade to a compatible version >= 18.0.0.

更新版本：https://blog.csdn.net/qq_41838435/article/details/128186488

2.运行项目

PS E:\nuxtProject\my-bilibili> npm run de

3.访问localhost:3000

欢迎页面默认为SSR 渲染：

关闭SSR后保存：

再次抓包查看返回html 变为SPA 渲染：

基于文件系统的路由

Nuxt.js 自带基于文件的路由系统，无须安装 vue-router，无须额外的配置

参考目录：

参考代码：
app.vue

<template>
    <NuxtLink to="/">首页</NuxtLink>

    <NuxtLink to="/video">视频页</NuxtLink>
    <NuxtPage />
</template>

<! -- 
 页面路由   <NuxtPage> 相当于<RouterView>
 页面跳转   <NuxtLink> 相当于 <RouterLink> 
--!>

设置SEO标题

参考代码：
app.vue

<script setup lang="ts">
 useSeoMeta({
  title:'哔哩哔哩 (゜-゜)つロ 干杯~-bilibili',
  description: '哔哩哔哩（bilibili.com)是国内知名的视频弹幕网站，这里有及时的动漫新番，活跃的ACG氛围，有创意的Up主。大家可以在这里找到许多欢乐。'
 })
</script>

<template>
    <NuxtLink to="/">首页</NuxtLink>

    <NuxtLink to="/video">视频页</NuxtLink>


    <NuxtPage />
</template>

效果：

public/favicon.ico：一般为页面的小图标