本课程相关代码已开源:
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