【Nuxt】初识 Nuxt 和目录说明

初识 Nuxt

Nuxt3 支持 Vue3 及其周边生态，提供前后端功能，支持 CSR(SPA)，SSR，SSG 渲染模式的应用。

Nuxt3 特点：

• Vue技术栈
  • Nuxt3是基于Vue3+Vue Router+Vite等技术栈，全程Vue3+Vite开发体验(Fast)。
• 自动导包
  • Nuxt 会自动导入辅助函数、组合API和Vue API,无需手动导入。
  • 基于规范的目录结构，Nuxt还可以对自己的组件、插件使用自动导入。
• 约定式路由（目录结构即路由）
  • Nuxt路由基于vue-router,在pages/目录中创建的每个页面，都会根据目录结构和文件名来自动生成路由
• 渲染模式：Nuxt支持多种渲染模式(SSR、CSR、SSG等)
• 利于搜索引擎优化：服务器端渲染模式，不但可以提高首屏渲染速度，还利于SEO
• 服务器引擎
  • 在开发环境中，它使用Rollup和Node.js。
  • 在生产环境中，使用Nitro将您的应用程序和服务器构建到一个通用.output目录中。
    • Nitrol服务引擎提供了跨平台部署的支持，包括Node、Deno、Serverless、.Workers等平台上部署。

通用渲染（服务器端渲染和水合） - SSR
仅客户端渲染（SPA） - CSR
全静态站点生成 - SSG
混合渲染（每条路由缓存策略）- SSR+CSR+SSG

Nuxt3 支持的渲染模式：

• 客户端渲染（CSR）：将 Vue.js 应用打包成一个 JavaScript 文件，通过浏览器下载并解析执行，由客户端负责渲染页面。
• 预渲染（SSG）：在构建时将 Vue.js 应用预渲染成静态 HTML 文件，通过 CDN 或者其他方式进行分发，由客户端负责渲染页面。
• 服务端渲染（SSR）：在服务器端渲染 Vue.js 应用，生成 HTML 页面直接返回给浏览器，客户端只需要执行一些简单的 JavaScript 代码即可完成页面渲染。

上图来源：博客

Nuxt 服务器引擎 Nitro：

Nuxt服务器引擎Nitro解锁新的全栈功能。

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

在生产中，Nitro将你的应用和服务器构建为一个通用的 .output 目录。这个输出很轻:从任何 Node.js 模块(除了polyfills)中删除。你可以在任何支持JavaScript的系统上部署这个输出，从 Node.js, less server, Workers, Edge-side 渲染或纯静态。

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

搭建项目

搭建项目：nuxt getting-started

目录结构

默认情况下，App.vue 是 Nuxt 的全局入口文件，常用于：

• 定义页面布局Layout或自定义布局，如：NuxtLayout
• 定义路由的占位，如：NuxtPage
• 编写全局样式
• 全局监听路由等等

启动端口配置（nuxt.config.ts）：

devServer: {
    host: "0.0.0.0",
    port: 3001,
},

在 composables 和 utils 下的方法会自动注册，其他地方可以直接调用

composables
utils

但是，nuxt 在 package.json 中中并不能直接看到某些库（如 vue 、vue-router） 的版本号，这时我们可 使用 npm list 命令来查看项目中使用到库的版本，然后手动锁版本号。