应用篇
背景：工作当中目前很少用到服务端渲染，但我在想，没用到的原因，有没有可能是不会用呢？现在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的整体认知，初步入门，具体使用方式，官网有非常具体的描述，强烈建议在使用之前通读下官网，在有了初步认识的前提下阅读官网，会有事半功倍的效果，加油加油。
