Nuxt-Notes
Nuxt-Notes copied to clipboard
cssmagic
Nuxt 学习笔记，涵盖 Nuxt 3 和 Nuxt 2。
## 全局 `` 配置 在 `nuxt.config.js` 中，通过 `app.head` 字段可以自定义全局 `` 内容。 如果需要使用全局的响应式数据，需要在 `app.vue` 中使用 `useHead()` 这个组合式函数。 ```typescript interface MetaObject { title?: string titleTemplate?: string | ((title?: string) => string) base?:...
## 配置文件和类型 ### Nuxt 配置 `nuxt.config.js` ```js export default defineNuxtConfig({ // 配置项写在这里 }) ``` > `defineNuxtConfig()` 这个方法无需手动导入。 ### 运行时配置 `runtimeConfig` **写入与读取**：运行时配置写在 Nuxt 配置中的 `runtimeConfig` 字段内。在代码中可通过 `useRuntimeConfig()` 读取这部分配置。 **可用范围**：通常 `runtimeConfig` 内的字段只在服务端可读，不过...
## 目录结构 * `.nuxt` —— 在开发阶段建时（`nuxt dev`）生成的 Vue 应用。 * `.output` —— 为生产环境构建时（`nuxt build`）生成的产物。 * `assets` —— 待编译的静态资源。在 JS 代码中可通过 `@/assets/` 来引用此目录中的资源；在 CSS 代码中通过 `~@/assets/` 来引用。（路径别名待确认） * `components` —— 应用的非页面级组件。会被...
## 概述 * Nuxt 有自己的插件机制。Nuxt 会在创建 Vue 应用时加载所有能找到的插件。 * 插件的存放位置也有约定。在 `plugins` 目录下，一级 `*.(js|ts)` 文件和一级目录下的 `index.(js|ts)` 文件会被自动加载。 * 导入顺序按字母排序，所以可以通过显式地给文件名加序号来决定它们的加载顺序。 * Nuxt 插件并不是 Vue 插件，但它可以用来加载 Vue 插件。 ## 格式 插件的默认导出是一个函数，代码示例如下： ```js export...
## 初始化 1. 创建项目（会创建一个子目录）： ```sh npx nuxi init {my-project} ``` > `nuxi` 是 Nuxt 官方的命令行工具。 期间不会提示任何问题，直接生成项目文件。 1. 安装依赖 `npm i`。（实际上更推荐用 yarn 作为包管理工具。） 1. 运行 `npm run dev` 启动，打开 http://localhost:3000/ 可以看到一个最简化的项目首页。...
## 概述 页面组件只能有一个根元素，这样路由间的过渡动效才能正确完成；否则路由过渡之后新页面可能无法正常显示。（注意：HTML 注释也会被视为元素。） ## 动态路由 * `[foo]` —— 表示 `foo` 是动态参数。 * `[[bar]]` —— 表示 `bar` 是可省略参数。 * `[...foobar]` —— 匹配任意层级的路径。 示例： * `/pages/[[slug]].vue` 可以被 `/` 和 `/abc` 匹配到。...
## 概述 全称应该是 “路由中间件”，用于把导航到特定路由之前所需要运行的代码抽出来。Nuxt 的中间件仅运行于 Vue 应用内，它跟 Web 服务器端的中间件不一个概念。 中间件的名称会被格式化为 kebab-case。 中间件本质上是一种 “路由守卫”。它对导航的控制能力如下： * `navigateTo()` * `abortNavigation()` ## 配置方法 * 全局中间件。命名为 `middleware/*.global.js`，会自动应用于所有路由。 * 页面级中间件。页面通过 `definePageMeta()` 指定。 * 匿名中间件。代码不是存放在 `middleware/` 目录中，而是内联于页面中。页面通过...
## 概述 Nuxt 有自己的插件机制。Nuxt 会在实例化 Vue 应用之前运行所有指定的插件。 Nuxt 插件并不是 Vue 插件，但它可以用来加载 Vue 插件。 ## 标准写法 一个标准的 Nuxt 插件通常导出一个函数，我们姑且称之为 “插件函数” 吧。Nuxt 在调用插件函数时会传入两个参数（`context` 和 `inject`），便于我们在函数内完成一些操作。示例如下： ```js export default (context, inject) => {...
## 概述 Nuxt 中间件与 Koa 中间件相比，在概念、功能、写法上都有一些明显差别，不能直接拿来类比或替换。 ## 写法 一个中间件通常写为一个 JS 模块，导出一个 “中间件函数”。示例如下： ```js export default function (context) { if (context.isDev) { console.log('当前是开发阶段') } } ``` 中间件函数会接收到一个 `context` 参数，这个 context 对象在...
在 Nuxt 的设计中，组件文件分为 “布局 > 页面 > 子组件” 三个级别。 ## 布局组件 ### 功能概述 “布局” 相当于为页面提供一个外层骨架，便于我们统一整个网站或某个频道的页面结构和样式。 布局组件存放在 `./layouts` 目录下。每个页面组件都会去寻找自己的布局来渲染页面，寻找优先顺序如下： 1. 如果页面组件指定了 `layout` 字段，则以此字段值作为文件名去寻找布局组件。比如下面这个组件页面会寻找 `./layouts/foo.vue` 作为自己的布局。 ```html export default { layout: 'foo',...