Nuxt.js | wubug

type

Post

status

Published

date

Jul 6, 2024

slug

summary

安装

配置

nuxt.config.ts

nuxt.config.ts文件中的属性可以覆盖或扩展默认配置SSJJJSDFAS

app.config.ts 应用程序配置

应用程序配置，用于公开在构建时确认的公共变量，这些变量不能被环境变量覆盖

资源

公共目录 public/ 访问： "/..."

资源目录 assets/ 访问：'~/assets/...'

引入样式

js中引入

style标签中引入

nuxt.config.ts配置属性中引入

使用npm包样式

使用外部样式

使用app.head 、useHead 设置link标签添加样式表

使用预处理器 SCSS Sass less 或Stylus 等

使用PostCSS

Nuxt内置了postcss ，可以在nuxt.config文件中设置

路由

pages目录

Nuxt文件系统路由为"pages/"目录中的每一个文件创建一个路由

<NuxtLink>

使用<NuxtLink>组件在页面之间创建链接，可以避免整个页面刷新，同时允许实现动画过渡，当<NuxtLink>在客户端视口中可见时，会自动预取链接页面组件，加快导航速度

路由参数

路由中间件 middleware目录

可自定义路由中间件，在导航到特定路由前运行代码

路由验证

validate接受route作为参数，可以返回一个是否通过的布尔值，或者指定{statusCode/ statusMessage}响应对象

SEO和Meta

默认值

组合函数方法

useHead 以编程和响应式方式管理头部标签

useSeoMeta 将站点的SEO元标签定义为一个扁平对象

definePageMeta 定义页面的元数据

Nuxt提供了<Title>、<Base>、<NoScript>、<Style>、<Meta>、<Link>、<Body>、<Html>和<Head>组件，让你可以直接在组件的模板中与元数据进行交互

数据获取

nuxt提供了两个组合函数(useFetch、useAsyncData) 和一个内置库($fetch)用于浏览器或服务器端获取数据

错误处理

Nuxt3 是一个全栈框架，在不同的上下文中可能发生各种运行时错误

vue渲染声明周期错误

API或Nitro服务器声明周期中的错误

服务器和客户端启动错误

下载JS chunks出错

vue渲染生命周期中的错误使用onErrorCaptured挂载，或由Nuxt提供的vue:error钩子

错误报错框架，也可通过 vueApp.config.errorHandler 事件监听

错误页面 error.vue

自定义默认错误页面，与app.vue 同级

服务器

渲染模式 routeRules

服务器端工具函数

readBody(event) 请求体
getQuery(event) query参数

getRouterParams(event)
getRouterParam(event,name)

getMethod(event)
isMethod(event,method)
getHeaders(event)
getHeader(event,name)

服务器中间件在请求之前执行

服务器插件 nuxt会自动读取server/plugins目录，并注册为nitro插件允许扩展nitro的运行时行为，并钩入生命周期事件

服务器工具函数

中间件

工具函数

插件：在创建vue应用是自动加载

组件

模块

上下文对象

Nuxt上下文对象

在插件、script-setup、vue组合式api中可使用 useNuxtApp()访问上下文对象

生命周期钩子

运行时

app:created error

vue:error

构建时 build:event

Nitro应用程序钩子运行时

render:response 发送响应前

render:html

render:island

自定义路由

添加自定义路由，创建router.options.ts

安装

配置