nuxt3：第一部分，从新建项目到官方文档实践

预览

以下内容你可以在 stackblitz 里预览以及调试。

[html]<iframe width="90%" height="700" style="margin: 10px 5%;" src="https://stackblitz.com/edit/nuxt-starter-wwjvzxta?embed=1&view=both" frameborder="0" loading="lazy" allowtransparency="true" allowfullscreen="true"></iframe>[/html]

1、搭建项目

新建项目

npx nuxi@latest init nuxt3-demo

创建 Nuxt 项目报错Error:Failed to download template from registry:Failed to download https://raw.githubus

• 在 ipaddress 中查询 raw.githubusercontent.com 对应的服务器 IP 地址
• 打开 C:\Windows\System32\drivers\etc ，在 hosts 文件中添加以下内容

# 将 Nuxt 下载请求的服务器域名与其服务器 IP 直接映射
185.199.108.133 raw.githubusercontent.com
185.199.109.133 raw.githubusercontent.com
185.199.110.133 raw.githubusercontent.com
185.199.111.133 raw.githubusercontent.com

配置 nuxt.config.ts

在熟悉完官方教程后会对这些配置有进一步的理解，可以跳过这部分回来再看，这边推荐一篇总结配置的文章：

Nuxt快速学习开发（二）-Nuxt3配置

2、核心概念

• Vue 技术栈：Vue3 + Vue Router + Vite + 服务引擎 Nitro 等技术栈。
• 约定式路由：目录结构即路由，在 pages/ 目录中创建的每个页面，都会根据目录结构和文件名来自动生成路由。
• 自动导包：自动导入辅助函数、组合式 API 和 Vue API，无需手动导入。
• 支持多种渲染模式： SSR、 CSR、 SSG 等。
• 服务器端渲染模式：提高首屏渲染速度，还利于 SEO。

3、官方教程总结

在开始学习 nuxt 之前，你可以像我一样在 stackblitz 里搭建好 nuxt 项目，具体的页面代码可以在 nuxt 官方文档上复制。这里会以截图的形式展示，以及将一些可能遇到的问题标出。

Nuxt 文档
stackblitz

3.1 视图

3.1.1 自动导入视图组件

默认情况下（不修改 nuxt.config.ts 配置） components 下的所有 .vue 文件将被自动注册为组件。

3.1.2 自动生成路由

默认情况下（不修改 nuxt.config.ts 配置），在 pages 下新建的 .vue 文件会通过 vue-router 自动生成路由。

这里需要注意修改 app.vue

<template>
  <div>
    <!-- 所有页面共享的标记，例如导航栏 -->
    <NuxtPage />
  </div>
</template>

注意单一根元素的影响

3.1.3 布局

默认情况下（不修改 nuxt.config.ts 配置），启用了布局的情况下会使用 layouts 下的 default.vue

注意需要在 app.vue 启用布局

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

• 可以通过命名布局和动态更改布局的方式在页面中使用不同的布局。

3.1.4 扩展 HTML 模板

通过在服务器钩子函数拦截响应，可以实现在服务返回 HTML 时对其内容进行修改。

3.2 资源

3.2.1 访问图片资源

如果熟悉 vue 项目的话，nuxt 处理资源的方式与其无异。

• 访问图片资源跟 vue 项目一样

  • 通过 public 访问，这实际上是作为服务器下的公共资源提供
  • 通过 assets 访问，这是 vite 或者 webpack 构建工具处理资源

3.2.2 全局导入 scss 样式

! 这个在 stackblitz 里调试会报错。下面截图是我在本地运行的情况。

在 nuxt.config.ts 文件中，你可以添加 vite 配置项，将 scss 变量全局导入。

注意需要安装 sass 依赖

npm install -D sass

3.3 样式化

3.3.1 本地样式表

• 本地样式表 nuxt 推荐放在 assets 中：

  • 通过 js 的 import 引入
  • 通过 css 的 @import 引入