一、前置知识：
1. SPA 跟 SSR 的区别：
- SPA（Single-Page Application）单页面应用是一种在浏览器中加载单个HTML页面，并通过JavaScript动态更新页面内容的应用程序，所有交互都是在客户端进行，服务器只提供API接口。
- SSR（Server-Side Rendering）服务端渲染是是在服务器端动态生成完整的HTML页面并将其发送到浏览器的应用程序架构。
2. SPA 的优缺点：
- 【优点1】提高性能和用户体验：由于只需要加载一次HTML页面，因此可以提高网站的性能和用户体验。
- 【优点2】流畅的用户交互：SPA可以通过异步请求和响应来更新局部页面，让用户感觉页面操作更为流畅。
- 【缺点1】对网络和服务器性能的要求更高：SPA需要加载大量的JavaScript和动态生成的内容，因此对网络和服务器性能的要求更高。
- 【缺点2】不利于SEO（百度蜘蛛，谷歌爬虫，页面收录）。
3. SSR 的优缺点：
- 【优点1】更好的SEO：由于页面在服务器端已经被渲染成HTML，搜索引擎爬虫可以直接抓取到页面的内容，有利于SEO优化。
- 【优点2】快速首屏加载：用户无需等待所有JavaScript执行完毕就能看到初步的页面内容。
- 【优点3】更适合复杂页面：对于包含大量数据、需要复杂计算的页面，SSR可以更好地处理并减少客户端的负载。
- 【缺点1】开发限制：SSR要求开发者在编写Vue组件时，需要考虑到服务器端和客户端环境的差异，不能过度依赖客户端环境。
- 【缺点2】服务器压力：由于页面在服务器端进行渲染，会增加服务器的负载压力。
- 【缺点3】调试困难：SSR的调试过程相对复杂，需要同时考虑到服务器端和客户端的日志和错误信息。
二、前置环境：
1. 我的本地环境是：node:v18.16.1，npm：9.5.1。
2. 执行 npx nuxi@latest init nuxtapp 初始化nuxt项目，
三、Nuxt3路由
1. Nuxt有一些约定的目录，有特殊功能，如 pages 目录的vue文件会自动注册路由，无需手动注册，如 components 目录的vue文件会自动按需加载组件，无需手动引入。
2. NuxtPage 相当于vue中的routerView
3. NuxtLink 相当于vue中的routerLink
<NuxtPage /> // 相当于vue中的routerView
<NuxtPage :keepalive="{ max: 10 }" /> // 缓存10级页面，提升用户切换体验
<NuxtLink to="/video" /> // 相当于vue中的routerLink
四、SEO优化
useSeoMeta({
title : 'TITLE',
description: 'DESC',
keywords: 'KEYWORDS'
referrer: 'no-referrer'
})
五、使用 @vant/nuxt 组件库， 使用 css 预处理器
1. 安装vant：npm i @vant/nuxt
2. 修改nuxt.config.ts配置: 追加 modules: ['@vant/nuxt'],
export default defineNuxtConfig({
devtools: { enabled: true },
modules: ['@vant/nuxt'],
})
- 验证vantUI是否生效(配置VantUI组件库主要色值)
// 设置组件库色值
:root {
--van-primary-color: #fe8720 !important;
}
3、使用 css 预处理器（sass或less），安装 sass 或 less ：npm i sass
六、交互/接口
1. 在 server 目录下，新增 api 目录
- 我理解的
server 目录： 可以理解为后端服务，也可以理解为中间层（假设依旧要请求后端接口的话，那么server目录它就是一个中间层）。
- 新增 ./server/api/channel.get.ts （如果是post则命名为channel.post.ts，也可以不加.get或者.post）
export default defineEventHandler(() => {
return {
status:200,
body: {
message: 'MSG'
}
}
})
2. 在对应页面下请求刚刚的 channel.get.ts 接口
const res = await useFetch('/api/channel', {method: 'get'}) as any []
- 这样子便能确保页面生成的时候，已经是获取到数据/内容，可供收录（爬取），这是使用nuxt的一个很主要的原因。
3. ts 去 any 化
- 使用vscode拓展辅助ts声明类型，安装：
json2ts
- 新建
types 目录，新建 xxx.d.ts 文件，结合扩展设置数据类型
- 复制接口返回的json数据（res.data）， json2ts即可辅助声明当前返回数据的类型。
- 对应page文件引入：
import type { xxxItem } from '@/types/video'
const list = ref<any[]>([])
调整成=>
const list = ref<xxxItem[]>([])
const res = await useFetch('/api/channel', {method: 'get'}) as any []
调整成=>
const res = await useFetch('/api/channel', {method: 'get'}) as xxxItem[]
七、动态路由
1. 为什么要使用动态路由
- 提前请求并渲染数据，用于内容区的SEO收录。
- detail设置相应的SEO头。
useSeoMeta({
title : 'TITLE',
description: 'DESC',
keywords: 'KEYWORDS'
referrer: 'no-referrer'
})
2. 新建 pages/xxx/[id].vue（一般用于详情页，list=>detail）
3. [id].vue 校验detail页面携参是否生效:
{{ $roure.params.id }}
const { params } = useRoute()
console.log(params)
八、项目打包
1. npm build // 生成用于服务器端运行的优化代码（我理解为伪静态）
2. npmgenerate // 生成静态网站，无需服务端渲染（我理解为纯静态）
九、项目部署到外网
1. 了解vercel， 支持免费部署，且对应仓发生变化时，vercel会进行项目热更。
2. 了解宝塔linux面板， 需要自己有一台服务器，安装宝塔linux，然后将build后的文件放置在对应的站点之下（数字域名 或 英文域名[英文域名合理是要经过备案才可以使用，切要进行相应的安全组、域名解析设置等等]）。
十、（长话短说）总结
- 我的开发环境
node:v18.16.1，npm：9.5.1
- 执行
npx nuxi@latest init nuxtapp 初始化nuxt项目
- 初始化失败的话，访问
https://codeload.github.com/nuxt/starter/tar.gz/refs/heads/v3 下载压缩包（科学）。
- Nuxt3路由：
NuxtPage , NuxtLink。
- SEO优化: 为了被爬取（百度蜘蛛，谷歌爬虫）。
- 使用 @vant/nuxt 组件库， 使用 css 预处理器（sass/less）。
- 交互/接口:
server目录作为项目中间层，设置对应api接口；pages目录作为view层，请求api接口 。
- 动态路由:
[id].vue。
- 项目打包：
npm build， npmgenerate
- 项目部署：
vercel, 宝塔linux面板
