介绍 Introduction

Nuxt 是一个免费的开源框架，以直观和可扩展的方式使用 Vue.js 创建类型安全、高性能和生产级的全栈 web 应用程序和网站。

我们所做的一切都是为了让您可以从一开始就编写.vue 文件，同时在开发中享受热模块替换，在生产中享受默认服务器端渲染的高性能应用程序。

自动化和惯例

Nuxt 使用约定和意见目录结构来自动执行重复性任务，并允许开发人员专注于推送功能。配置文件仍然可以自定义和覆盖其默认行为。

基于文件的路由
根据页面/目录的结构定义路由。这样可以更容易地组织您的应用程序，并避免手动路由配置的需要。
代码拆分
Nuxt 自动将代码分割成小块，这有助于减少应用程序的初始加载时间。
开箱即用的服务器端渲染
Nuxt 具有内置的 SSR 功能，因此您无需自行设置单独的服务器。
自动导入
在各自的目录中写入 Vue 组合式函数和组件，无需导入即可使用，并具有树状结构和优化的 JS bundle 的优点。
数据获取工具
Nuxt 提供了组合式函数处理 SSR 兼容性数据获取以及不同策略的组件。
零配置支持 TypeScript
使用我们自动生成的类型和 tsconfig.json 编写类型安全的代码，而无需学习 TypeScript
配置构建工具
我们默认使用 Vite 来支持开发中的热模块替换（HMR），并将您的代码与最佳实践打包应用于生产环境。

服务器端渲染

Nuxt 默认内置服务器端渲染（SSR）功能，无需自行配置服务器，这对网络应用程序有很多好处：

更快的初始页面加载时间
Nuxt 向浏览器发送完全渲染的 HTML 页面，该页面可立即显示。这可以提供更快的页面加载时间和更好的用户体验（UX），特别是在较慢的网络或设备上。
改进搜索引擎优化 SEO
搜索引擎可以更好地索引 SSR 页面，因为 HTML 内容是立即可用的，而不是需要 JavaScript 在客户端呈现内容。
在低配置设备上性能更佳
它减少了客户端需要下载和执行的 JavaScript 的数量，这对于处理大量 JavaScript 应用程序的低功率设备来说是有益的。
更好的无障碍性
在初始页面加载时，内容立即可用，从而提高了依赖屏幕阅读器或其他辅助技术的用户的可访问性。
缓存更容易
页面可以在服务器端缓存，这样可以减少生成和向客户端发送内容所需的时间，从而进一步提高性能。

总的来说，服务器端渲染可以提供更快、更高效的用户体验，并提高搜索引擎优化和可访问性。
由于 Nuxt 是一个多功能框架，因此您可以使用nuxt generate将整个应用程序静态渲染到一个静态主机，使用ssr: false选项全局禁用 SSR，或者通过设置routeRules选项利用混合渲染。

服务器引擎

Nuxt 服务器引擎Nitro释放了新的全栈能力。

在开发过程中，它使用 Rollup 和 Node.js Worker 进行服务器代码和上下文隔离。它还通过读取server/api/中的文件和server/middleware/中的服务器中间件来生成服务器 API。

在生产中，Nitro 将您的应用程序和服务器构建到一个通用的.output目录中。该输出是轻量级的：经过精简并去除任何 Node.js 模块（polyfills 除外）。您可以在任何支持 JavaScript 的系统上部署该输出，包括 Node.js、Serverless、Workers、Edge-side 渲染或纯静态。

生产就绪

Nuxt 应用程序可以部署在 Node 或 Deno 服务器上，预渲染以托管在静态环境中，或部署到无服务器和边缘提供商。

模块化

模块系统允许通过自定义功能和与第三方服务的集成来扩展 Nuxt。

架构

Nuxt 由不同的核心软件包组成：

Core Engine: nuxt
Bundlers: @nuxt/vite-builder and @nuxt/webpack-builder
Command line interface: nuxi
Server engine: nitro
Development kit: @nuxt/kit
Nuxt 2 Bridge: @nuxt/bridge

我们建议您阅读每个概念，以全面了解 Nuxt 的功能和每个软件包的范围。

安装 Installation

准备

Node.js - v16.10.0 或者更高版本
文本编辑器 - 我们推荐使用 Visual Studio Code，并安装 Volar 扩展。

安装

创建项目
- npx 安装 npx nuxi@latest init <project-name>
- pnpm 安装 pnpm dlx nuxi@latest init <project-name>
进入项目根目录，安装依赖：
- yarn yarn install
- npm npm install
- pnpm pnpm install （注意：pnpm install 之前确保配置文件 .npmrc中有 shamefully-hoist=true）
启动开发环境服务
- yarn yarn dev -o
- npm npm run dev -- -o
- pnpm pnpm dev -o