跳到主要内容

Nuxtjs

Nuxt.js 是一个基于 Vue.js 的通用应用框架。

提示

版本 v3.x

常见特性​

  • 基于 Vue.js
  • HTML 头部标签管理 ✅
  • 服务端渲染 ✅
  • 强大的路由功能，支持异步数据 ✅
  • 打包和压缩 JS 和 CSS
  • 支持各种样式预处理器： SASS、LESS、 Stylus 等等
  • 集成 ESLint
  • 支持 HTTP/2 推送
  • 自动代码分层
  • 静态文件服务
  • 本地开发支持热加载

流程图​

incoming request -> servrinit -> middleware -> validate(验证 page) -> fetch(获取 data) -> render -> navigate;

安装​

npm create nuxt <project-name>
# 忽略 modules 安装 [Nuxt.js 模块列表](https://www.nuxtjs.cn/guide/modules)

目录结构​

- assets
- components # 目录，自动应用程序中使用，而无需显式导入。
- layouts
- middleware
- pages
- plugins
- static
- store
- app.vue # 入口
- nuxt.config.js
- package.json

视图​

默认 Nuxt 会将此 app.vue 文件视为入口点，并为应用程序的每个路由呈现其内容。

  • 视图包括应用模板、页面、布局和 HTML 头部等内容。

路由​

  • 页面及路由

    Nuxt.js 依据 pages 目录结构（提供的 Vue 文件）自动生成 vue-router vue-router 模块的路由配置。

  • 路由跳转

    NuxtLink to（内置组件）

  • 路由参数

    ts const route = useRoute();

  • 路线验证

    definePageMeta() 定义 validate

中间件

中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。

放置在 middleware/ 目录，文件名将是中间件名称。

SEO 元标签

我们建议 useHead()使用 app.vue。

数据提取

  • useFetch(url)几乎等同于 useAsyncData(url, () => event.$fetch(url))。

    useAsyncData，可包装多个$fetch 请求 返回值：data，status，refresh，clear，error

错误处理​

vueApp.config.errorHandler

参考链接

官网：https://nuxt.com/