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
皮毛..全部
