Nuxt3入门日记(一)

麻爪
1,064 阅读8分钟

为什么要使用nuxt？

在这个问题之前，我们必须搞清楚什么是服务端渲染什么是客户端渲染，以及我们业务的使用场景。

我们知道前端初学必然是html + css +js 实际上学会这三样已经完成一个项目的开发了。我们使用纯原生开发比如个人博客和静态的官网页面，这种网站内容变化比较少的，且交互弱的网站。使用原生就可以做到了。 但是随着个人硬件性能提升，WEB的交互性要求越来越强，为了更好的响应，我们会用到ajax来和服务端交换数据，并对小块页面内容做更新渲染。这种方式也就是客户端渲染。

客户端渲染

在客户端渲染中，浏览器首先下载一个空的 HTML 页面，然后通过 JavaScript 来获取数据并动态地填充页面内容，这种方式可以提供更加流畅的用户体验，在页面内容发生变化 的情况这种渲染方式不会重新请求整个页面对用户来说体验更好，在体验上相对于服务端渲染来说，缺点体现在首屏渲染上，因为开始的HTML在未渲染内容时候为空。同时还带来的SEO的问题，因为搜索引擎爬虫通常只能解析静态的 HTML 内容，对于通过 JavaScript 动态生成的内容可能无法很好地抓取。

服务端渲染

服务端渲染能够有效地解决一些关键问题。在服务端渲染模式下，当请求到达服务器时，服务器会立即生成完整的 HTML 页面，然后将其发送给客户端。这样一来，搜索引擎爬虫就可以直接抓取到完整的页面内容，这对于 SEO 来说是极为有利的。

同时，用户也能够更快地看到页面内容，从而显著提高首屏加载速度。所以，在开发那些对** SEO** 有强烈需求的站点时，我们通常会采用服务器端模板引擎来生成页面内容。以 Java 的 JSP 为例：

  1. 在服务器端，每当有页面请求传来，服务器会依据请求的 URL 准确地确定需要渲染的页面。

  2. 接着，服务器从数据库或其他数据源获取所需数据，并将这些数据传递给 JSP 模板。

  3. 在 JSP 模板中，通过特定的语法将数据巧妙地嵌入到 HTML 结构中，进而生成完整的 HTML 页面。

  4. 最后，服务器把生成的 HTML 页面发送给客户端浏览器进行显示。

如今，在开发过程中我们常常会使用 Vue 或者 React 之类的框架。至于为什么选择框架而不是原生开发，这里暂不深入讨论。简单来说，主要是为了实现更高效的开发。然而，像 Vue 这样的框架存在一个问题，那就是所有的内容都是通过 JavaScript 动态添加到页面上的，这与上面提到的服务端渲染的 HTML 模板类似，只不过是把这一过程从服务端转移到了客户端。但这样做会导致搜索引擎难以很好地爬取我们用 Vue 编写的网站。

那么，我们自然就会产生一个疑问：能否使用 Vue 来进行服务端渲染呢？

当然是可以这样做的，比如我们使用现阶段vue3开发最常使用的前端构建工具vite就支持ssr https://cn.vitejs.dev/guide/ssr.html

还有我们今天要讲的主题Nuxt

Nuxt 简化了服务端渲染的开发过程。它提供了一套约定大于配置的开发模式，开发者只需要按照一定的规范组织代码，就可以轻松实现服务端渲染。Nuxt 还提供了很多实用的功能，如路由管理、状态管理、静态文件生成等，大大提高了开发效率。

创建nuxt项目

我们在命令终端执行如下命令创建一个新的nuxt项目

pnpm dlx nuxi@latest init <project-name>

然后我们进入新页面的目录安装相关依赖并启动项目

pnpm i
pnpm dev

这样我们一个空的nuxt模板项目就开启了

image.png

然后我们修改app.vue的文件内容就可以开始开发了。但是我们知道很少有项目会只有一页，更何况如果真的是一个单页的活动页，我基本上就选择原生给写了所以这里就涉及到了路由相关的，一般来说开始一个新的nuxt应用我会把相关目录都添加上，无论是否用到

image.png

我会在文章接下来用到一个个目录，也许有的目录会用不到，大家可以去官方文档查阅详细内容。

创建nuxt路由

我们想和vue一样新增不同的路由，只需要新建文件夹pages，在pages目录下新增比如index.vue这样的视图组件，nuxt会自动生成导入vue-router并生成路由信息。这一步如果有使用过umi的朋友应该很好理解这种约定式路由的用法。

image.png

在视图组件新建完成之后我们需要在入口应用里面移除我们的欢迎组件引用路由出口，这个<NuxtPage/>组件的用法和vue-router的<router-view/>一致

//app.vue
<template>
  <div>
    <NuxtPage />
  </div>
</template>

我们查看本地服务就可以发现已经是index.vue文件的内容了。那么怎么新增更多页面并跳转到新页面呢？

我们同样在pages文件夹下新建新路由文件new.vue ，并在index.vue 中使用

<template>
  <div>
    <NuxtLink to="/news">news page</NuxtLink>
  </div>
</template>

就这样就实现了我们的路由跳转，我们可以发现nuxtlink和我们使用router-link的用法是一致的。

动画.gif

命名路由

当然约定式路由不仅仅如此，除了这种确定的路由我们还支持命名路由 只要我们的文件夹或者文件名只用中括号来包裹，那么这个路由内容就可以是任意变量，比如我们要跳转路由并携带一个参数，路由指向如下

localhost:3000/new/1

只需要在pages目录下面定义new文件夹并在文件夹下面定义

pages/
--- index.vue
--- content.vue
--- new/
------[id].vue

这样就可以携带参数到我们的路由页面了

   <nuxt-link to="/new/2">new</nuxt-link>

一般这种命名路由页面我们肯定需要拿到路由的参数，在nuxt里面获取参数内容的方式和vue一样只是不需要手动导入useroute的hook，注意参数变量名字就是我们命名路由的名字，比如你使用[id] 那么id就是变量名。

<template>
  <div>{{ route.params.id }}</div>
</template>

<script setup>
const route = useRoute();
</script>

命名路由的这个命名部分是必带的，如果定义了命名路由但是我们没有带参数跳转

   //index.vue
   <nuxt-link to="/new/">new</nuxt-link>

而是直接空参跳转，那么就会发生路由不存在的情况 如果我们希望访问new/能够访问到页面，那么我们需要在路由下加上index页面

pages/
--- index.vue
--- content.vue
--- new/
------[id].vue
------index.vue

嵌套路由

那么如果我希望我在new/访问的路由展示的内容，在我到命名路由/new/id 时候同样可以看到而不是替换呢从这里我们就可以引申出nuxt 另一种路由方式也就是嵌套路由。我们需要在pages在根目录上加上一个同名文件

pages/
--- index.vue
--- content.vue
--- new.vue
--- new/
------[id].vue
------index.vue

在我们的new.vue 使用nuxtPage组件。这个和我们在vue里面使用嵌套路由的方式一样

<template>
  <div>
    这里是new的父路由
    <NuxtPage />
  </div>
</template>

当然我们也可以不使用这种方式携带参数，比如我们希望携带多个参数，直接使用我们query参数，这样我们也不需要特殊命名什么路由文件，就按照正常命名就可以了

 //index.vue
<nuxt-link to="/content?id=2&age=18">content</nuxt-link>
   
//content.vue
<template>
  <div>
    content {{ route.query.id }}
    age{{ route.query.age }}
  </div>
</template>

<script setup lang="ts">

const route = useRoute()
</script>

可选路由

nuxt还支持我们使用一种叫做可选路由的方式，我们使用双[]来命名我们的可选部分

pages/
--- index.vue
--- [[select]]/
------option.vue

当我们访问可选路由时，即使删除可选部分的内容，仍然可以找到对应的路由页面，不会出现路由不存在的提示。

  <div>
    <NuxtLink to="/select/option">可选路由</NuxtLink>
  </div>

动画.gif

全局路由

我们还可以在nuxt定义全局路由，我们依旧使用[]包裹命名内容并用...运算符为前缀取名，那么当遇到未定义的路由时，页面会定向到该全局路由对应的页面。

pages/
--- index.vue
---[...404].vue
--- [[select]]/
------option.vue

本文我大致讲解了服务端渲染和客户端渲染的概念及特点，指出在不同场景下的优势和不足，特别是对于 SEO 和首屏加载速度的影响。同时提到了使用框架如 Vue 的原因以及其在服务端渲染方面的问题。 简单的介绍了如何创建 Nuxt 项目，包括使用命令创建项目、安装依赖和启动项目等步骤。还讲解了 Nuxt 的约定式路由用法，如自动生成路由信息、实现路由跳转、命名路由、嵌套路由、使用 query 参数传递多个参数以及可选路由 我们对 Nuxt 的基本功能和路由使用方法有了初步的了解。在下一篇文章中，我们将深入探讨编程导航式路由以及其他配置文件在 Nuxt 项目中的应用，进一步提升我们对 Nuxt 的掌握和运用能力。

avatar
文章
阅读
粉丝