Nuxt-Notes
Nuxt-Notes copied to clipboard
cssmagic
Nuxt 学习笔记，涵盖 Nuxt 3 和 Nuxt 2。
## GA ### 官方初始化脚本 ```html window.dataLayer = window.dataLayer || [] function gtag() {dataLayer.push(arguments)} gtag('js', new Date()) gtag('config', 'G-XXXXXXXXXX') ``` ### 模块 `@nuxtjs/google-analytics` 这个官方推荐模块还没支持 Nuxt 3 和 GA4。 ### Vue 插件...
## 隐藏 `X-Powered-By` 响应头 ```sh npm i nuxt-security ``` 安装 `nuxt-security` 模块之后，会自动禁用这个响应头。 ```js export default defineNuxtConfig({ modules: [ '...', 'nuxt-security', ], }) ``` ### 问题 * 不生效。可能是因为 Nuxt 输出的是全小写的 `x-powered-by`...
## 缺陷 * 在 `composables` 目录下新增文件时，“Auto Import” 可能无法正常工作，提示找不到新文件中的方法。重启一下服务就好了。 * 在 `utils/*.js` 中修改代码时，“Auto Import” 可能无法正常工作，提示找不到某些 Composable 方法（组合式函数）。
## 文件组织 所有写在 Vue 组件之外样式代码，统一存放在 `@/assets/css/` 目录下。 ## 准备工作 ### 预处理器 1. 安装 `npm i -D sass`。 1. 编写全局的预埋样式（变量、mixin 等），汇总到 `@/assets/css/base/index.scss`。 1. 修改 `nuxt.config.ts`，注入预埋样式（参见下文）。 1. 在组件中可以直接使用预埋的变量、mixin 等。 ### PostCSS /...
## 组件 ### `` ```html ``` 这个组件在服务端渲染时得到： ```html Loading comments... ``` 也可以通过 `#fallback` 插槽来声明服务端占位内容。 ## 变量 > 以下变量在 Nuxt 3 文档中似乎没有提及。 ### `process.server` & `process.client` ```js console.log('process.server ===', process.server) console.log('process.client...
## 方法 `useCookie()` 是一个 SSR 友好的读写 cookie 的方法。只在 setup 阶段和生命周期钩子中可用。 ```js const counter = useCookie('counter') ``` 得到的 `counter` 是一个 ref，赋值需要用 `counter.value = 1` 的形式。 在默认情况下（`watch: true`），`counter` 的深层变化会触发 cookie 更新。 而在...
## 概述 Nuxt 提供了强大的 hook 系统，通过 hook 来扩展框架的方方面面。 ## Nuxt 构建时 Hook 这些 hook 对 Nuxt 模块和构建上下文开放。 在 `nuxt.config` 中使用： ```js export default defineNuxtConfig({ hooks: { 'close': () => {...
## 概述 * `nuxt` —— “Build Core”。 当 `nuxi dev` 或 `nuxi build` 时，会建立一个公共的上下文。它保存了与 `nuxt.config` 合并之后的格式化的选项、一些内部状态、hook 系统，允许组件之间相互通信。 这个上下文可以在全局通过 `nuxt/kit` 的组合式 API 来访问。因此每个进程只允许运行一个 Nuxt 实例。 如果想扩展 `nuxt` 的接口，或在构建流程中 hook 各个阶段，可以使用 “Nuxt...
## 概述 `useState()` 是一个对 SSR 友好的 `ref()` 的替代品。它的值在 SSR 之后的水合阶段仍然都会保留，可通过唯一 key 被所有组件共享。 这个组合式函数仅在 setup 阶段和生命周期钩子内可用。 由于 state 需要传递到客户端，它的内容必须是可序列化为 JSON 的。因此不应该用它来保存 Class、函数和 Symbol 等类型。 ### 注意事项 不要在 setup 之外定义 `const state...
## 方法 在 setup 阶段和生命周期钩子内可以使用以下方法： * `useFetch` * `useLazyFetch` * `useAsyncData` * `useLazyAsyncData` > `useFetch()` 可以认为是对 `useAsyncData()` + `$fetch()` 的简化包装。 > > `$fetch()` 方法就是一个简单的请求方法，没有其它逻辑。通常在 `useAsyncData()` 内部使用，或者也可以在客户端使用。 ## Lazy 在上述四个方法中，带 `Lazy`...