Nuxt3全面使用的一些注意事项和心得体会

855 阅读2分钟

前提之前项目是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函数非常有用,可以公共的一些数据通过该方法暴露出去引用

先到这里吧,未完待续.......