持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情
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>
