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

文章目录

  • 介绍 Introduction
    • 自动化和惯例
    • 服务器端渲染
      • 服务器引擎
      • 生产就绪
      • 模块化
      • 架构
  • 安装 Installation
    • 准备
    • 安装

Nuxt 菜鸟入门学习笔记一:介绍与安装_第1张图片
Nuxt官网地址: 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释放了新的全栈能力。

在开发过程中,它使用 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
    • pnpm 安装 pnpm dlx nuxi@latest init
  • 进入项目根目录,安装依赖:
    • 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

你可能感兴趣的:(前端实践,Nuxt,SSR,服务端渲染)