SSR 与 Nuxt

SSR 是 Server-Side Rendering，即服务端渲染的英文缩写。

Vue.js 是一个用于构建客户端应用的框架。默认情况下，Vue 组件的职责是在浏览器中生成和操作 DOM。在客户端是单页应用 (SPA) 。

也可以将 vue 程序在服务端渲染，渲染完成再返回给浏览器，最后在浏览器端将返回的 HTML 激活(hydrate)，这个过程就是 SSR。

用 SSR 的好处：

• 更快的首屏加载
• 更好的 SEO

构建一套完整的 SSR 应用会很复杂，Nuxt 很好的解决了这个问题，让 Vue 的服务端渲染变得更加简单。

Nuxt 是一个构建于 Vue 生态系统之上的全栈框架，它为编写 Vue SSR 应用提供了丝滑的开发体验。还可以把它当作一个静态站点生成器来用！简单来说， Nuxt 是 Vue服务端渲染的通用解决方案。

Nuxt2 版本是基于 Vue2.x 版本的，Nuxt3 版本是基于 Vue3.x 版本的，目前 Nuxt3处于RC版本。本文基于 Nuxt3，官网传送门。

前置准备

• 开发工具：VS Code
• VS Code插件：Vue Language Features(Volar)
• VS Code插件：TypeScript Vue Plugin(Volar)
• node版本需要高于v14.16.0

安装

创建项目：

pnpm dlx nuxi init learn-nuxt3 

进入项目目录：

cd learn-nuxt3 

安装依赖：

pnpm install --shamefully-hoist 

启动项目：

pnpm run dev 

入口组件

app.vue 是 Nuxt3 的入口组件，在 Nuxt3 中如果没有pages/目录，则表示不会包含vue-router依赖。不需要路由就可以这样做。

<template><div>Hello Nuxt3!</div>
</template> 

当应用需要使用路由时，就要在根目录下创建pages文件夹目录。此时，需要使用 <NuxtPage> 路由出口组件:

<template><div><!-- 路由出口 --><NuxtPage/></div>
</template> 

在我们的项目根目录下创建 pages 目录，并修改 app.vue 文件。

路由

创建了pages文件夹目录后，Nuxt会自动集成vue-router，并根据pages目录下的文件名自动生成路由。这种形式称为 约定路由。

pages 目录下创建 index.vue 为默认页，创建 about.vue:

<template><div><h1>关于我们</h1></div>
</template> 

此时访问 http://localhost:端口号/about，就会进入 关于我们 的页面，表明 Nuxt 已经为我们自动生成路由了。访问 http://localhost:端口号 就是默认的 index.vue 页面。

动态路由

把动态的参数放到[]中括号中，会生成动态路由。

创建user/[id].vue:

<template><div><h1>用户页</h1></div>
</template>

<script setup lang="ts"></script> 

访问 http://localhost:端口号/user/xxx，会进入到 用户页。

直接访问 http://localhost:端口号/user，会出现404页面，此时可以 创建 user/index.vue 作为默认页。

也可以将[]应用到文件夹名称上或者混合使用，如：user-[role] user-[id].vue。

路由参数

• $route.params 获取路由参数，例如：/user/1，可以得到{ id: 1 }对象
• $route.query 获取query参数，例如：/user/1?name=tom，可以得到{ name: 'tom' }对象

<template><div><h1>用户页</h1><p>用户id：{{ $route.params.id}}</p></div>
</template> 

在 js 中使用路由参数，可以通过 Vue3 setup 中的useRoute方法：

<script setup lang="ts">const route = useRoute()console.log(route.params)console.log(route.query)
</script> 

路由跳转

Nuxt3 中路由跳转可以使用 <NuxtLink> 组件进行跳转。

user/index.vue中：

 <div><h1>用户默认页</h1><NuxtLink to="user/1">用户1</NuxtLink> |<NuxtLink to="user/2">用户2</NuxtLink> |<NuxtLink to="user/3">用户3</NuxtLink></div> 

嵌套路由

• 目录和文件同名 (同级目录下)
• 使用 <NuxtChild> 组件作为子组件出口，类似于 vue-router 中的 <RouterView>

在根目录下新建 parent 文件夹目录 和 parent.vue 文件，在 parent 下新建 child.vue，目录结构如下：

-| pages/
---| parent/
------| child.vue
---| parent.vue 

parent/child.vue

<template><div><h6> pages/parent/child.vue </h6></div>
</template>

<script setup lang="ts"></script> 

parent.vue

<template><div class="box"><h1> pages/parent.vue </h1><NuxtChild /></div>
</template>

<script setup lang="ts"></script>

<style> .box {border: 2px solid #aa0089;} </style> 

此时可以访问 http://localhost:端口号/parent/child，显示 child.vue 的内容。

当然也可以在 parent 目录下新建 index.vue，访问 http://localhost:端口号/parent时就会默认显示 pages/parent.vue 和 parent/index.vue 嵌套的内容。如果没有这个 parent/index.vue，访问 /parent 时，就只会显示 pages/parent.vue 的内容。

页面head元素处理

设置页面标题：

• <Title> 标签

<Title>关于我们</Title> 

• useHead 方法，可以为页面设置标题、meta信息等

 useHead({title: '关于我们-'}) 

使用自带的模板方法：

 useHead({title: '关于我们-',titleTemplate(title) {return title ? `xx网站 - ${title}` : 'xx网站'},}) 

添加meta信息：

 useHead({// ...meta: [{ name: 'description', content: '网页的描述'},{ name: 'keywords', content: '关键字1'},]}) 

给 body 添加 class样式：

<style> .red {color: red;} </style> 

 useHead({// ...bodyAttrs: {class: 'red'}}) 

加载js文件：

 useHead({// ...script: [{src: 'assets/a.js',body: true}]}) 

静态资源文件

根目录下新建 public 和 assets 文件用于存放静态资源文件，将两个目录下都放上一张1.png的图片，在 about 页面中使用：

 <!--assets --><img src="~/assets/1.png" alt=""><!-- public --><img src="/1.png" alt=""> 

可复用逻辑

将可复用的逻辑存放在composables目录下，会被自动识别导入到应用程序，以便在全局范围内使用。

新建 composables/useAge.ts:

export const useAge = () => {return useState('age', () => 18)
} 

使用：

<script setup lang="ts">const age = useAge()console.log(age.value)
</script> 

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享