Nuxt3 学习笔记

前言

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

学习前提

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

正文

1. nuxt3 在开发过程中，多数都是基于约定的开发模式，既: 根目录创建一个 pages 目录，更目录创建一个 servers 目录这些，都是约定好的。只需要按约定的规则开发即可
2. nuxt3 开发过程中，有两个概念：服务端执行，客户端执行，一定要区分清楚，这里可以参考：关于 nuxt 生命周期, 里面内容是nuxt2的概念，但是也可以用来理解 nuxt3
3. 认知看 nuxt3 官网 https://v3.nuxtjs.org/docs/usage/data-fetching,仔细理解里面的概念，不懂英文的直接用浏览器工具翻译成中文
4. nuxt3 会自己起一个 server 服务器。
5. nuxt3 可以用 pm2 管理进程。目前 pm2 功能已经很强大了。值得学习。
6. nuxt3 项目如果需要第三方服务器做数据交互，有两种方式
   1. 页面（vue） 使用https://v3.nuxtjs.org/docs/usage/data-fetching方法> 第三方服务器 【可能出现跨域问题】
   2. 页面 （vue） 同上> nuxt3自带server $fetch方法> 第三方服务器
7. nuxt3 中使用了 https://github.com/unjs/ohmyfetch 这个库发送 http 请求 【没有跨域问题】
8. nuxt3 的配置文件 nuxt.config.js 很重要，不过配置成功后很少去改动
9. 根目录下的 app.vue 是整个页面的入口。里面的内容全局共享
10. nuxt3 修改页面的标签图标 icon有两个入口
    1. nuxt.config.js配置meta
    2. 使用内置标签
11. nuxt3 修改页面 title 方法： 使用 内置 <Title> 标签
12. nuxt3 NuxtLink 标签必须带 to 属性，不然编译不过
13. 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)

总结

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