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的前端相关电子书               ，《前端面试宝典（附答案和解析）》 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，难点
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 、重点知识视频教程（全套）














。

有需要的小伙伴














，可以点击下方卡片领取 
  
  
  
  
  
  
  ，无偿分享