Nuxt3框架入门：初始化项目

前言

Nuxt3，作为 Vue.js 的一个强大框架，为开发者提供了一个快速、灵活的解决方案，使得构建服务端渲染（SSR）、静态生成（SSG）和单页应用（SPA）变得更加简单。

之前有了解过，近期抽出时间打算简单入门学习一下 Nuxt3。在网上也参考了很多资料，顺手记录一下自己的学习过程，同时也希望可以帮助到其他同学。

Nuxt3是什么

Nuxt3 是 Nuxt.js 的最新版本，基于 Vue3 实现，利用了 Vue 的 Composition API 和其他新特性。它旨在提供更好的性能、更简化的开发体验，以及更灵活的架构，使开发者能够轻松构建复杂的应用程序。Nuxt3 支持 TypeScript，具有模块化的设计，允许开发者根据项目需求进行自定义。

Nuxt、Next、Nest区分

Nuxt.js：（那克斯特）

Nuxt.js 是一个基于 Vue.js 的通用应用框架，用于构建服务器渲染的 Vue.js 应用程序。
它提供了一些默认配置和约定，使得开发者可以快速搭建 SSR（服务器端渲染）应用，以提供更好的 SEO（搜索引擎优化）和性能。还集成了 Vue 路由器和 Vuex 状态管理，使得开发复杂的前端应用变得更加简单。

Next.js：（耐克斯特）

Next.js 是一个基于 React 的通用应用框架，用于构建服务器渲染的 React 应用程序。
它也提供了一些默认配置和约定，使得开发者可以快速搭建 SSR 应用，并且具有出色的性能和开发体验。
Next.js 支持静态生成和服务器端渲染，可以根据页面的需求选择最佳的渲染方式。

Nest.js：（耐斯特）

Nest.js 是一个用于构建高效、可扩展的服务器端应用程序的渐进式 Node.js 框架。
它结合了 TypeScript（或 JavaScript）和面向对象编程的概念，使得开发者可以使用类、装饰器和依赖注入等技术来构建可维护和可测试的应用。
Nest.js 基于模块化的架构设计，提供了丰富的功能和插件，包括路由管理、中间件支持、数据库集成等。

开发环境

pnpm 7.6.0
nodejs 18.12.0
vscode

创建项目

官方提供的命令创建项目：npx nuxi@latest init nuxt-demo

创建好模板后，直接下载依赖： pnpm i

由于我创建项目的时候没有切换18版本的node，这里输出了警告。自行切换node版本>18

启动项目

pnpm dev

目录结构

.nuxt/
- 这个目录是 Nuxt 生成的临时文件夹，包含了所有构建和生成的产物。一般情况下，不需要手动修改其中的内容。
public/
- 存放公开的静态文件，这些文件不会被 webpack 处理，直接可以通过根路径访问。
server/
- 用于定义自定义服务器端逻辑，例如 API 路由。可以在此目录下编写 Node.js 代码，以支持后端逻辑。
nuxt.config.ts
- Nuxt 的配置文件，可以在此处设置项目的各种配置选项，如路由、插件、模块、构建选项等。
package.json
- 项目的基本配置文件，包含项目的依赖、脚本命令和其他配置信息。
tsconfig.json
- TypeScript 的配置文件（如果使用 TypeScript），用于定义 TypeScript 的编译选项

添加其他目录

我们可以根据具体项目情况添加以下目录。

assets/
- 存放静态资源文件，如样式表（CSS）、图片和其他不需要经过 webpack 处理的文件。相对路径可以直接在组件中引用。
static/
- 存放静态文件，这些文件在构建时不会被处理，构建后的文件直接会放置在根目录下。
plugins/
- 存放插件文件，可以用来注册全局组件或添加自定义功能。插件会在 Vue 实例创建之前进行加载。
components/
- 存放 Vue 组件的地方。Nuxt 会自动注册此目录下的所有组件，便于在应用中使用。
composables/
- 存放 Vue 3 的 Composition API 函数，供多个组件共享逻辑和状态。
store/
- 存放 Vuex 状态管理的文件（如果你使用 Vuex）。在这个目录下创建的文件会自动注册到 Vuex Store 中。
layouts/
- 用于定义应用的布局。可以在此处创建不同的布局文件，如主要布局和特定页面的布局。Nuxt 会根据页面的需求应用相应的布局。
middleware/
- 存放中间件函数，可以在路由变化时执行的逻辑，例如身份验证、数据预取等。
pages/
- 存放 Vue 文件，每个文件自动对应一个路由。这个目录是 Nuxt 项目的核心，Nuxt 会根据此目录生成应用的路由结构。

报错问题

ERROR [uncaughtException] proxyReq.appendHeader is not a function

项目启动后报错：

原因：node版本太低。此时我的node版本为：16.x，升级18.x后重启服务即可解决。

pnpm i xxx报错

ERR_PNPM_META_FETCH_FAIL GET https://registry.npmmirror.com/pnpm: Value of "this" must be of type URLSearchParams

因为在当前nuxt3项目中使用的是node20.x版本，切换为16.x就正常了。

总结

本篇我们搞清楚了nuxt是什么，然后初始化了一个简单项目，搞清楚了源码各目录的作用，以及解决了在创建项目时遇到的一些问题。