应用篇
背景:工作当中目前很少用到服务端渲染,但我在想,没用到的原因,有没有可能是不会用呢?现在React和Vue都在大力发展自己的服务端渲染框架,感觉是时候学习一下相关的知识了,有了先进的工具,就要利用起来!目前工作主要在使用Vue,那就从Nuxt开始入手学习吧~
提前说明
本篇不讲使用细节,入门我们只从以下几个部分看一下总体的开发方式和方向,保证我们开发中知道怎么去找,应该去研究哪方面的知识。
现在Nuxt的最新版本为3.11,本篇就以3.11版本为例进行描述。
1.怎么创建项目?
直接命令行npx nuxi@latest init <project-name>
,会生成一个结构基本完整的初始工程。
为便于阅读,此处粘贴一个初始化好的目录结构。
以下描述均以此文件目录为基础进行叙述。
2.如何写页面和组件?
页面说的是能通过路由访问到的页面,路由相关请参考问题3,对于页面本身,都是由多个组件构成。先说文件位置,页面的开发需要在更目录下新建一个pages
文件夹,文件写在此文件夹内;组件,在根目录下新建个components
文件夹,组件写在此文件夹内。
为啥要指定文件夹呢,因为Nuxt是在这方面有一些优化的,在我们开发Vue客户端渲染项目的时候,引用组件需要先import
进来,再在components
属性中注册,才能使用,但是Nuxt中,我们只要在components
文件夹中写了组件,就可以直接在其他任何文件中引用,不需要再有import
和components
注册操作。
另外提一下一个猜测,官网在描述components
文件夹的时候,特别说明了一下如何注册全局组件(.global.vue或配置文件),根据这个来猜测,默认情况下,我们引用的组件,虽然每个组件都能在任何地方调用而不用手动注册,但这些组件应该不是全局组件,而是谁用到,给谁注册,当然注册行为是编译阶段自动完成的,无需手动完成。
需要注意的是,如果是要写动态组件,是需要显式import的,import { SomeComponent } from '#components'
,SomeComponent 为自定义的组件名(默认组件名规则为路径+文件名,例如:/components/test/Button. vue,那组件就是),#components是固定写法,Nuxt会自动寻找components文件夹中的组件。
<script setup lang="ts">
import { SomeComponent } from '#components'
</script>
<template>
<component :is="SomeComponent" />
</template>
3.路由注册及跳转如何实现?
路由的注册,像组件的注册一样,只要在pages
文件夹中写了文件,在编译时就会自动给我们进行路由的配置,路由地址就是文件目录+文件名称,比如文件在pages/admin/login.vue,那进行路由跳转时需要访问的地址就是/admin/login。
路由的使用,需要在App.vue中使用标签,就类似我们之前用的,默认第一个页面是pages文件夹中的index.vue页。
路由的跳转,对比vue-router中的RouterLink,Nuxt提供了NuxtLink标签,用于实现点击跳转,也可以使用 navigateTo方法,在js中进行手动跳转。
4.如何做的状态管理?
Nuxt提供了一个useState的api,用于状态管理,这个跟React有几分相似。
看一个官网示例:
<script setup lang="ts">
const counter = useState('counter', () => Math.round(Math.random() * 1000))
</script>
<template>
<div>
Counter: {{ counter }}
<button @click="counter++">
+
</button>
<button @click="counter--">
-
</button>
</div>
</template>
因为Nuxt本身支持Vue语法,所以也可以使用Pinia来进行状态管理。
5.如何获取数据?
服务端渲染,获取数据的方式有些许不同,先说提供接口的地方,是写在根目录下的server文件夹中,本篇不做描述。重点说下如何从接口中获取数据。
这里涉及到Nuxt服务端渲染的流程,当我们想显示一个页面的时候,需要请求这个页面的地址,这个时候,服务端会执行相关代码,生成一个html文件返给浏览器,同时,服务端还会将他执行过的一些js文件返给浏览器,浏览器会在后台再执行一遍这些代码,为啥这么做呢,因为前端页面毕竟是动态的,需要与用户交互的,所以,前端需要再执行一遍做好准备工作,用于应对用户的各种操作。
我们初步来看三个api,useFetch
,useAsyncData
和$fetch
,这三个api均是Nuxt提供的用来支持请求数据的。其中useFetch和useAsyncData都具备的一个作用,就是网络请求去重,前面我们说过,setup中的代码会执行两次,为了防止网络请求两次,Nuxt提供了这两个api。
useFetch,相当于useAsyncData和$fetch的结合体,同时具备网络请求和网络去重的能力。
看示例:
<script setup lang="ts">
const { data: count } = await useFetch('/api/get/count')
</script>
<template>
<p>Page visits: {{ count }}</p>
</template>
useAsyncData,相当于一个带有网络去重作用的壳子,里面可以包裹fetch只具备网络请求的能力,不具备网络去重的能力。
看示例:
<script setup lang="ts">
const { data, error } = await useAsyncData(() => $fetch('/api/todos', {
method: 'POST',
body: {
// My todo data
}
}))
</script>
6.如何部署?
Nuxt作为服务端渲染框架,当然是作为一个服务来部署,当执行npm run build
后,所有的打包文件会输出到.output
文件夹中,我们需要找到具有node环境的机器,在这上面执行node .output/server/index.mjs
来启动服务即可。当然还有其他部署方式,也有各种更为简便的工具帮助我们部署,此处仅做简单描述。
7.Nuxt配置文件及SEO优化
Nuxt的配置文件是一个非常强大的配置文件,他存在于根目录下,叫nuxt.config.ts
,几乎我们上面提到的所有默认情况,他都可以更改。比如是否需要自动导入组件?自动导入的组件是否需要加上路径的名称?哪个文件夹用来注册路由?等等等等很多配置
在SEO优化方面,Nuxt提供了非常方便的api,比如useSeoMeta,还有、标签等,能够让我们在不同页面配置对应的描述信息,更好的支持搜索引擎检索。
看下示例:
<script setup lang="ts">
useSeoMeta({
title: 'My Amazing Site',
ogTitle: 'My Amazing Site',
description: 'This is my amazing site, let me tell you all about it.',
ogDescription: 'This is my amazing site, let me tell you all about it.',
ogImage: 'https://example.com/image.png',
twitterCard: 'summary_large_image',
})
</script>
<script setup lang="ts">
const title = ref('Hello World')
</script>
<template>
<div>
<Head>
<Title>{{ title }}</Title>
<Meta name="description" :content="title" />
<Style type="text/css" children="body { background-color: green; }" ></Style>
</Head>
<h1>{{ title }}</h1>
</div>
</template>
总结:
本文的目的是帮助大家建立起对Nuxt的整体认知,初步入门,具体使用方式,官网有非常具体的描述,强烈建议在使用之前通读下官网,在有了初步认识的前提下阅读官网,会有事半功倍的效果,加油加油。