前提之前项目是nuxt2来写的,现在升级nuxt3
1、一个原因是老板让升级,第二个原因也是自己觉得现在正式推出了生态应该完善了吧,那就生
nuxt2的项目升级nuxt3,并未按照官方提供的nuxt-bridge,而是从底层全部重写,类似地基重新搭建,毕竟语法不同了么
2、不在使用@nuxtjs/axios,全面使用useFetch
毕竟nuxt3官方提供的封装请求发放
3、pinia全免替代vuex,更轻量的数据状态管理插件,使用便捷,可参考官方文档
4、环境变量,新建.env.test .env.pro 来区分测试和正式服
5、runtimeConfig 一个客户端和服务端都可获取到的配置,这里可以定义一些公共的全局都用到的,比如服务端渲染和客户端渲染都用的,公共baseUrl
6、public替代Nuxt2中static的文件夹
7、Nuxt3的plugins文件夹的使用,
可以通过[文件名].server.js或者[文件名].client.js 区分服务端使用和客户端使用
还可以 01 02 用来区分加载顺序
可以使用 nuxtApp的 provide方法,注入全局需要的方法,使用的时候,需要 获取useNuxtApp, 在使用“$”符号
8、Nuxt3与Nuxt2 动态页面的创建区别
Nuxt3 需要 【page】就是动态的这点与2中_page 有区别,具体可参考官方文档
9、middleware 的使用
defineNuxtRouteMiddleware 会解构出 to和 from对象,可以做相应逻辑处理
10、mixins的替代,composables的使用
11、router.options 的路由重写可以新建app文件夹如图,对路由重写
12、useCookie的使用,用来cookie存储和获取,而不是nuxt2中的cookie-universal-nuxt
13、element-plus的使用,这里需要特别注意,和element有区别,样式以及个别方法的使用,具体可看官方文档
尤其表单,日期组件
14、Nuxt3的useRequestEvent() 这个非常有用,可以获取请求头的一些信息
15、useHead 用来设置seo一些信息
16、因为vue3了,我使用了setup语法糖,注意vue3的语法和vue2的区别
17、definePageMeta的使用可以页面鉴权以及设置layout的使用
18、composables,use函数非常有用,可以公共的一些数据通过该方法暴露出去引用
先到这里吧,未完待续.......