一、目录：Nuxt 使用约定和固定的目录结构来自动化重复性任务
- pages ：定义页面，根据目录下的每个组件文件名生成路由，无需手动配置
-
- 动态路由，多层嵌套，每一层都可以嵌套动态路由 / 普通路由, 支持同一层多个变量
- componenets ：定义公共组件，整个应用中自动可用，无需导入
- composables：可组合项，是compositionAPI 的延申，可以自定义一些状态逻辑，导出默认方法时，自动全局导入。
- middleWare：定义中间件，按照字母顺序执行，可以进行路由跳转拦截等。
- layouts : 定义应用的通用布局（
default.vue、admin.vue），可以避免重复代码，保持页面结构的一致性。 - plugins：定义插件、默认按顺序执行，默认服务器端和客户端都执行，但是也可以定义客户端或浏览器端插件、适用于全局注册属性、方法和插件 & 在某些生命周期执行一些钩子
二、自动导入功能
除了上述的固定文件夹中的组件无需手动导入，ref、reactive、computed等Vue ompositionAPI以及 nuxt 提供的一些composables，如useRouter、useRoute、useFetch 等都可以直接使用，以及一些默认组件compone
三、数据获取及关键API
useFetch
支持ssr，可组合函数从API端点获取数据
是 useAsyncData 和 $fetch 提供的包装器，支持响应式自动刷新watch，可以从函数中获取指定的键pick， 返回的是响应式ref，能够基于key正确去重和缓存
适用于首次加载数据，可以将数据从服务端传递到客户端，与useState 结合使用
TODO：为什么onRequest 钩子没生效呢？ ofetch
$fetch
没有状态管理和依赖项等，就是Http请求，适用于客户端事件触发
useHead & useSeoMeta
响应式管理Head标签
useRouter 和 useRoute
useRouter 类似 vue-router 可以向路由器实例添加删除获取路由等，
useRoute获取路由hash、query、path等
useError
获取到全局的错误进行响应处理，可以和下方的错误处理结合使用
useNuxtApp
共享运行时上下文，通过provide 全局共享数据和方法，hooks 自定义nuxt 应用运行时的行为，集合vueApp全局定义组件指令等
transition
页面过渡 & 布局过渡 & 组件过渡
全局过渡：nuxt.config.js 中配置，app中定义css，可通过definePageMeta 重写
组件过渡：通过trans
四、错误处理
页面出现任何问题、可以被error 捕获到并展示默认的app/error.vue,使用useError 获取到对应状态码，进行不同错误处理以及页面提示。
五、水合错误
数据不一致：ref 和 useState
ref 的值本身不会自动从服务器传输到客户端。当客户端的 Vue 应用进行水合时，该 ref 会按照其在客户端代码中的定义重新初始化（通常是其默认值），适合定义客户端局部响应式变量。
useState 能确保讲服务端的数据自动序列化传输给客户端，并在水合时保持一致
客户端组件： v-if/v-else 逻辑在服务器与客户端不一致、需要访问浏览器特有API或不支持 SSR 的第三方库/组件，务必使用 <ClientOnly> 包裹。
六、配置
提供一些默认别名
定义环境变量和私有令牌
runtimeConfig 定义一些系统变量，public 中的变量会打包进客户端，
奇怪的UI问题
1.ios 输入框字体不能小于16px， 否则会自动放大，使用网站禁止收缩也无法控制
3.ios手机中数字部分的文本会变成可点击的 ，禁止数字/邮箱的可点击状态 name: "format-detection", content = 'telephone=no,date=no,address=no'
4.滚动到底部会带动页面滚动，设置当前元素overflow:hidden也不行，是最外侧滚动 overscroll-behavior: contain;
5.全屏数据无法展示完整-目前只是最下方加padding:
sns-jira.sns.sohuno.com/secure/atta…
- 拖拽时touch-action:none
