本课程相关代码已开源:

javascript 复制代码
https://gitee.com/itshizhan/nuxt-inaction-course

The Intuitive Vue Framework

什么是Nuxt?

Nuxt is an open source framework that makes web development intuitive and powerful.
Create performant and production-grade full-stack web apps and websites with confidence.

正如官方网站介绍,Nuxt 是一个开源的web全栈框架,它使 web 开发直观且强大。
让你自信地创建性能性能卓越且适用于生产的全栈 web 应用程序和网站。

Nuxt官方特别强调Nuxt是Intuitive的, 即像Vue一样直观易用,然而,事实可能并非如此,你并不能简单的凭直觉来理解和认识Nuxt。

Nuxt特点

基于Nuxt开发,有一些约定的惯例(conventions), 理解这些conventions 有助于你更换的理解Nuxt。

1. File-based routing: 基于文件的路由,/pages 目录下的文件会基于一定规则自动生成路由,不需要你手动配置。
2. Code splitting: Nuxt 可以为你自动分割代码块(splits your code into smaller chunks
3. Server-side rendering out of the box: 开箱即用的服务端渲染,即Nuxt 具有内置的 SSR 功能,因此您无需自己设置单独的服务器。
4. Auto-imports:在各自的目录中编写 Vue 组合函数和组件,并使用它们,无需手动导入,并具备 tree-shaking 能力
5. Data-fetching utilities: Nuxt 提供了组合函数来处理与 SSR 兼容的数据获取以及不同的策略。
6. Zero-config TypeScript support: 无需学习 TypeScript 即可编写类型安全的代码,Nuxt会自动生成类型和 tsconfig.json
7. Configured build tools: 默认使用 Vite,在开发中支持热模块替换(HMR),并为生产环境捆绑您的代码,并内置最佳实践。

服务端渲染 Server-Side Rendering

Nuxt 默认自带服务器端渲染(SSR)功能,无需自行配置服务器,给 Web 应用带来诸多好处,包括更快的初始页面加载时间,更利于 SEO,在低性能设备上表现佳,提升可访问性,以及更便于缓存从而进一步提高性能。

Nuxt 底层引擎

The Nuxt server engine Nitro unlocks new full-stack capabilities.
Nuxt 的底层引擎为Nitro .

开发环境: 使用 Rollup 和 Node.js 工作线程处理您的服务器代码,并实现上下文隔离。
生产环境: Nitro 将您的应用和服务器构建到一个通用的.output 目录中。您可以将此输出部署在任何支持 JavaScript 的系统上,从 Node.js、无服务器、工作线程、边缘侧渲染到纯静态。

学习Nuxt前置知识

Based on Vue: Vue

Core Engine: nuxt

Bundlers: @nuxt/vite-builder and @nuxt/webpack-builder

Command line interface: nuxi

Server engine: nitro

Development kit: @nuxt/kit