位置: IT常识 - 正文

体验Vue3的SSR框架 - Nuxt3(vue3ts)

编辑：rootadmin

体验Vue3的SSR框架 - Nuxt3 SSR 与 Nuxt

推荐整理分享体验Vue3的SSR框架 - Nuxt3(vue3ts)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue ssr axios,vue3 swr,vue ssr axios,vuejs ssr,vue ssr seo,vue-ssr,vue-ssr,vue ssr框架,内容如对您有帮助，希望把文章链接给更多的朋友！

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 CodeVS 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> 路由出口组件:

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

路由

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

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

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

动态路由

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

创建user/[id].vue:

访问 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方法：

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样式：

加载js文件：

useHead({// ...script: [{src: 'assets/a.js',body: true}]})静态资源文件

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

<img src="~/assets/1.png" alt=""><img src="/1.png" alt="">可复用逻辑