Nuxt3 学习笔记

20230626 补充

推荐几个我发现的好一点的博客
1： 杨村长做的nuxt3系列教程
2：kapo hey_cool@163.com总结的一系列入门教程

前言

nuxt3 是 vue3 的服务端渲染封装库。花了一天时间研究了一下，现在做如下总结

学习前提

1. 懂一点 nodejs 知识
2. 懂一点 vue3 知识
3. 会用 npm 工具

正文

1. nuxt3 在开发过程中，多数都是基于约定的开发模式，既: 根目录创建一个 pages 目录，根目录创建一个 servers 目录这些，都是约定好的。只需要按约定的规则开发即可
2. nuxt3 开发过程中，有两个概念：服务端执行，客户端执行，一定要区分清楚，这里可以参考：关于 nuxt 生命周期, 里面内容是nuxt2的概念，但是也可以用来理解 nuxt3
3. nuxt3 服务端渲染时，仅仅是浏览器加载的第一个页面是服务端渲染，在加载完成的页面继续操作（比如路由跳转），则和vue的单页面渲染逻辑是一样的了。这一点用来理解服务端渲染特别重要。
4. 服务端执行的生命周期是setup，在客户侧，setup生命周期依然会再次执行一次。【仅限于首次加载的页面】【这里可以多看一些将 什么情况下会触发服务端渲染的文章】
5. 认真看 nuxt3 官网 https://v3.nuxtjs.org/docs/usage/data-fetching,仔细理解里面的概念，不懂英文的直接用浏览器工具翻译成中文
6. nuxt3 会自己起一个 server 服务器。
7. nuxt3 可以用 pm2 管理进程。目前 pm2 功能已经很强大了。值得学习。
8. nuxt3 项目如果需要第三方服务器做数据交互，有两种方式
   1. 页面（vue） 使用https://v3.nuxtjs.org/docs/usage/data-fetching方法> 第三方服务器 【可能出现跨域问题】
   2. 页面 （vue） 同上> nuxt3自带server $fetch方法> 第三方服务器
9. nuxt3 中使用了 https://github.com/unjs/ohmyfetch 这个库发送 http 请求 【如果在server端发送请求，则没有跨域问题】
10. nuxt3 的配置文件 nuxt.config.js 很重要，不过配置成功后很少去改动 配置文件文档
11. 根目录下的 app.vue 是整个页面的入口。里面的内容全局共享
12. nuxt3 修改页面的标签图标 icon有两个入口
    1. nuxt.config.js配置meta
    2. 使用内置标签
13. nuxt3 修改页面 title 方法： 使用 内置 <Title> 标签
14. nuxt3 NuxtLink 标签必须带 to 属性，不然编译不过
15. nuxt3 NuxtLink 标签激活后会自动添加两个 class 样式：router-link-active:匹配路由， router-link-exact-active：完全匹配路由

server篇

1. nuxt3 server 目录下有两个目录会自动导入，但是仅限于一级目录(2021-12-27，有可能是 bug)，超过一级目录都不生效
2. api 目录
3. middleware 目录
4. nuxt3 server/api 目录里的文件名必须小写，否则不生效(2021-12-27，有可能是 bug)

常见问题记录

1. 如何在控制太打印服务端日志：配置文件中有一个 logLevel:"verbose", 配置项，配置后就可以看到console.log的打印了，其中编译器里的打印是服务端执行时的打印，客户端执行时的打印需要在浏览器的控制台中查看
2. 如何判断当前当前是服务端还是客户端

 if(process.server){
    console.log("这里是 服务端")
}else{
    console.log("这里是 客户端")
}

总结

以上就是这一天的劳动成果，特此记录一下。目前写了一个比较完整的 demo 代码，如果有需求，请到这里下载http://shop.sizhuiit.com, demo 下载不了或者有 需要帮助的，加 QQ 联系：327896777