nuxt3教程 2024年7月

nuxt3教程 2024年7月

https://www.bilibili.com/video/BV11W421R7nC 1 2

前置-一集搞明白客户端渲染和服务端渲染,多页面开发和spa单页面开发
1安装介绍
2 服务端和客户端
3 基础配置
4 区分server和client,调试nuxt
5 路由的基本使用
6 命名路由,可选路由,全局路由
7 嵌套路由
8 编程式路由navigateTo
9 路由中间件
10 导航守卫
11 composables
12 $fetch和useAsyncData
13 useFetch,lazy,refresh
前置-axios的响应拦截器里应该怎么写错误处理?

14 useFetch封装

15 state
16 pinia的引入
前置-搞懂cookie同源请求
17 修改拦截器和导航守卫
18 nuxt错误处理
19 seo优化
20 layout
21 打包发布

Nuxt.js 的生命周期分为服务端生命周期和客户端生命周期。以下是它们的主要阶段:
服务端生命周期

nuxtServerInit(store, context): 服务端初始化,用于设置全局状态和动态路由参数。

middleware: 用于处理中间件逻辑,如身份验证。

validate: 用于校验动态路由参数的有效性。

asyncData: 在页面或组件加载之前被调用,用于请求数据。

fetch: 用于组件请求数据。

服务端和客户端共有的生命周期

beforeCreate: 在实例被创建之前执行,此时组件的 data 和 methods 都还没有被初始化。

created: 在实例创建之后执行,此时 data 和 methods 已经被初始化。

客户端生命周期

beforeMount: 在模板编译和挂载之前执行。

mounted: 在模板编译和挂载之后执行。

生命周期钩子执行顺序

父组件:beforeCreate -> created -> beforeMount -> mounted

子组件:beforeCreate -> created -> beforeMount -> mounted

注意事项

生命周期钩子中不能直接使用 window 对象,因为服务端没有 window。

asyncData 和 fetch 生命周期钩子中可以进行数据请求。

validate 生命周期钩子用于校验路由参数,必须返回一个布尔值或包含布尔值的 Promise。

modules:done 生命周期钩子在应用模块安装完成后触发。

以上是 Nuxt.js 的主要生命周期阶段。

jsp ssr

//ajax
//修改标签内容
//jsp 服务端渲染,ajax
1/内容比较多的利于seo的,那你就nuxt
1/内容比较小,需要seo,jsp ajax
1/不需要seo的,直接上vue

nuxt3使用方式
服务端 客户端
封装fetch
I
npx nuxi@latest init myNuxt

vue3+router+pinia
服务端渲染和客户端渲染
axios的响应拦截器的错误处理
npx nuxi@latest init myNuxt

//nuxt nitro 服务端引擎

css Ui库 都在配置引入

25
in const config=useRuntimeConfig()
if (config. isServer){

if (import. meta. server){

debug 选择js 可以配置

只能客服端 服务端log

/user/ [aa].vue param.aa 命令路由

可选路由 文件夹[[test]]/test.vue

全局路由名字随便 [...404].vue 前面都没匹配 才到这

自定义路由
page.vue里面写
definePageMeta({
path:'/about'
})

onMounted 不能ssr

嵌套路由
/pages/user.vue + nuxtPage
/pages/user/xx.vue

//navigateTo |在服务端渲染的时候使用
//router.push 在客户端渲染的时候使用

const router=useRouter()

beforeEach 路由导航守卫

// middleware/my.js 路由导航守卫
export default defineNuxtRouteMiddleware((to,from)=>{})
//page.vue
definePageMeta({
    middleware:['my']
})
// middleware/test.global.js 全局中间件路由导航守卫 page不用引用 同名字全局assel吗小先

storevue pinia

判断环境加token判断

composables 公共函数等 只能第一层不用导入

$fetch( request: 'http://localhost:8080/test') 同api fetch 会服务端客户端都执行 要sql就麻烦 要判断环境 只能在服务端推荐

在useAsyncData 里面执行就只在服务端 key固定 只在服务端执行一次 获取数据在这

语法糖 useFetch useAsyncData+$fetch lazy先出标签

​ useLazyFetch 上结合

服务端渲染  useFetch  解构出来 status 有状态padding
//refresh 刷新token 

useAsyncData+axios

useFetch 封装 或其他库 onRequset onResponse..basrurl

onResponseError

2024 7-


nuxtApp.runWithContext 执行跳转 小bug

https://juejin.cn/post/7246328828837838909

useState 全局状态 config也可以

cnpm install pinia @pinia/nuxt 还在配置加入

npm i @pinia-plugin-persistedstate/nuxt -D 持久化 nuxt陪着 pinia配置

修改拦截器和导航守卫

//不管是服务端还是客户端都能获取到token

需要token的,就不需要ssr服务端渲染

pinia plugin ture 服务端get token ok 持久化 nuxt陪着 pinia配置 用cookies获取

利用特效 只在客户端 find onMounted

./error.vue 自定义error页面

definePages({
    error:Object
})
clearError({redirect:'/'})

收到 客户端 showError 只能在服务端createError

seo

seo
app.vue
useHead(
title,mate,
    titleTemplate(){}
)

layouts 公共部分 布局

nuxt-layout 默认加 layouts/default.vue

default.vue =>slot

nuxt-layout =>nextPage

definePageMeta( meta: {
layout:false
}) 不使用布局

打包可以在配置分 生产 开发环境

这里的意思是使用第三方的CDN链接用于在生产环境下达到减少包体积的效果我习惯直接 说cdn加速,大家不要搞混了bb查看

√ index vueV login.vue

皮毛..全部

posted @   KooTeam  阅读(68)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在外漂泊的这几年总结和感悟,展望未来
· 博客园 & 1Panel 联合终身会员上线
· 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
· https证书一键自动续期,帮你解放90天限制
· 在 ASP.NET Core WebAPI如何实现版本控制?
点击右上角即可分享
微信分享提示