Nuxt 菜鸟入门学习笔记一：介绍与安装-Javascript前端- WEB程序开发笔记

Nuxt 菜鸟入门学习笔记一：介绍与安装

原创
作者：phpEcho
发布时间：2023-07-19 23:36
标签： Nuxt SSR 服务端渲染
浏览量：720

本文内容由Nuxt官网翻译而来，对Nuxt做了介绍，以及安装。

[TOC]

![Nuxt](https://cnd.51blog.xyz/images/nuxt-logo.png)
Nuxt官网地址：[https://nuxt.com/](https://nuxt.com/)

# 介绍 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](https://nitro.unjs.io/)释放了新的全栈能力。

在开发过程中，它使用 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。
<a name="DJX9e"></a>

### 架构

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

- Core Engine: [nuxt](https://github.com/nuxt/nuxt/tree/main/packages/nuxt)
- Bundlers: [@nuxt/vite-builder](https://github.com/nuxt/nuxt/tree/main/packages/vite) and [@nuxt/webpack-builder](https://github.com/nuxt/nuxt/tree/main/packages/webpack)
- Command line interface: [nuxi](https://github.com/nuxt/nuxt/tree/main/packages/nuxi)
- Server engine: [nitro](https://github.com/unjs/nitro)
- Development kit: [@nuxt/kit](https://github.com/nuxt/nuxt/tree/main/packages/kit)
- Nuxt 2 Bridge: [@nuxt/bridge](https://github.com/nuxt/bridge)

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

# 安装 Installation

## 准备

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

## 安装

- 创建项目
  - 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`

启动成功将在默认浏览器自动打开`http://localhost:3000`

WEB程序开发笔记

Nuxt 菜鸟入门学习笔记一：介绍与安装

文章归档

推荐文章

热门标签

友情链接