位置: IT常识 - 正文
体验Vue3的SSR框架 - Nuxt3(vue3ts)
编辑：rootadmin推荐整理分享体验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> 路由出口组件:
<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.vueparent/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的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。 有需要的小伙伴，可以点击下方卡片领取，无偿分享
上一篇：前端传递对象参数,以及后端接受参数 @PathVariable @RequestParam @RequestBody 注解的使用(前端向后端传递对象数组)
下一篇：论文笔记：TIMESNET: TEMPORAL 2D-VARIATION MODELINGFOR GENERAL TIME SERIES ANALYSIS(论文笔记整理软件)
