起航 Nuxt | 初识篇

前言

Nuxt 是什么

Nuxt 是一个能够创建高性能和生产级的全栈 Web 应用框架。

在数据双向绑定和组件化方面，Nuxt 选择了 Vue.js；在处理客户端导航方面，Nuxt 选择了 vue-router；

在支持开发热模块替换和生产环境打包方面，Nuxt 支持 webpack5 和 Vite；在兼容旧版本浏览器，支持最新的 JavaScript 语法转移方面，Nuxt 使用 esbuild；

Nuxt 支持开发环境服务器、服务端渲染和 API 接口开发；Nuxt 使用 h3 来实现部署的可移植性，如支持在 Serverless、 Workers 和 Node.js 环境中运行。

由此可见，Nuxt 是一个直观的 Web 框架，一个全栈框架，能够提供前端和后端的能力。

Nuxt 的特点

如果你是初学者，建议直接学习最新版本的 Nuxt，也就是 Nuxt3 版本。Nuxt3 的第一个稳定版本正式发布于 2022年11月16日。目前，Nuxt3 技术栈已经相对比较稳定，并且拥有丰富的社区生态，可以说现在是入手学习 Nuxt 的最佳时机。

Vue 技术栈

Nuxt3 是基于 Vue3 + Vue Router + Vite + 服务引擎 Nitro 等技术栈，全程使用 Vue3 + Vite 开发，带来极致的开发体验。

约定式路由

约定式路由的言外之意就是目录结构即路由，Nuxt 路由基于 vue-router，在 pages/ 目录中创建的每个页面，都会根据目录结构和文件名来自动生成路由。

自动导包

Nuxt 会自动导入辅助函数、组合式 API 和 Vue API，无需手动导入。Nuxt 本身基于规范的目录结构， Nuxt 还可以对自己的组件、 插件使用自动导入。

渲染模式

Nuxt 支持多种渲染模式，如 SSR、 CSR、 SSG 等。

利于搜索引擎优化

服务器端渲染模式，不但可以提高首屏渲染速度，还利于SEO。

服务器引擎

在开发环境中，Nuxt 使用 Rollup 和 Node.js。

在生产环境中，Nuxt 使用 Nitro 将应用程序和服务器构建到一个通用的 .output 目录中。其中，Nitro 服务引擎提供了跨平台部署的支持，包括 Node、 Deno、 Serverless、 Workers等平台上部署。

Nuxt 的环境搭建

初始化项目

Node 的环境要求：v18.0.0 及之后的版本

首先，在命令行终端输入：npx nuxi@latest init <project-name>

然后打开项目目录，运行项目：cd <project-name> npm run dev；

配置 host

值得注意的是，在创建项目的时候，也许会出现报错的情况，可能是因为网络原因导致。

在命令行终端输入：ping raw.githubusercontent.com 检查是否能连通，如果访问不通，那么就配置下 host。

配置 host，本地解析域名：

1. Mac 电脑 host 配置路径： /etc/hosts

2. Win 电脑 host 配置路由： c:/Windows/System32/drivers/etc/hosts

3. 在 host 文件中新增一行 ，新增的内容为：185.199.108.133 raw.githubusercontent.com

4. 重新 ping 域名，如果通了就可以重新开一个终端创建项目

Nuxt 的相关配置

应用入口

默认情况下， Nuxt 会将 app.vue 视为入口点，并为应用程序的每个路由呈现其内容，常用于：

1. 定义页面布局 Layout 或 自定义布局，如： NuxtLayout

2. 定义路由的占位，如： NuxtPage

3. 编写全局样式

4. 全局监听路由

5. 等等

<template>
  <div>
    <!-- 组件库的组件 nuxt/ui -->
    <NuxtWelcome />
  </div>
</template>
<script setup>
  // 监听全局路由
  let router = useRouter()
  router.beforeEach((to, form)=>{
  
  })
</script>
<style></style>

Nuxt 配置

nuxt.config.ts 配置文件位于项目的根目录，可对 Nuxt 进行自定义配置。更多详细的配置信息可参考官网的 Nuxt Configuration ，例如：

runtimeConfig：运行时配置

runtimeConfig 是 Nuxt 中的运行时配置，即可以在其中定义环境变量：

可通过 .env 文件中的环境变量来覆盖 runtimeConfig 中配置的变量，优先级（.env > runtimeConfig）

.env 的变量会打入到 process.env 中，符合规则的会覆盖 runtimeConfig 的变量

.env 一般用于某些终端启动应用时动态指定配置，同时支持 dev 和 production

export default defineNuxtConfig({
  // 这里定义的运行时配置会不能在 process.env 中访问
  runtimeConfig: {
    appKey: "aabbcc", // 可以在服务端访问
    public: {
      baseURL: "http://xxx.com" // 服务端和客户端都可以访问 
    }
  }
})

appConfig：应用配置

appConfig 是 Nuxt 中的应用配置，即可以在构建时确定的公共变量，如：theme 主题。

此配置会和 app.config.ts（存在于项目根目录中） 的配置合并（优先级 app.config.ts > appConfig）。

export default defineNuxtConfig({
  // 定义应用的配置
  appConfig: {
    title: "Hello Nuxt3"
    theme: {
      primary: "orange"
    }
  }
})

app：app配置

通过 app 可以给 app 所有的页面添加配置，如给每个页面上设置 head 信息。

export default defineNuxtConfig({
  // app 配置
  app: {
    // 给 app 所有的页面的 head 添加的配置(SEO, 添加外部的资源)
    head: {
      title: "学习 Nuxt",
      charset: "UTF-8",
      viewport:
        "width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no",
      meta: [
        {
          name: "keywords",
          content: "Nuxt 官网",
        }
      ],
      link: [
        {
          rel: "shortcut icon",
          href: "favicon.ico",
          type: "image/x-icon",
        },
      ],
      style: [
        {
          children: `body{ color: red; }`,
        }
      ],
      script: [
        {
          src: "https://nuxt.com",
        }
      ]
    }
  }
})

router：配置路由相关的信息

通过配置 router 设置路由相关的信息，比如在客户端渲染可以配置 hash 路由。

export default defineNuxtConfig({
  router: {
    options: {
      hashMode: true // 只在spa应用是有效的
    }
  }
})

alias：路径的别名

通过配置 alias 可以设置路径的别名，默认已配好，我们可以直接使用路径别名。

{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "assets": "/<srcDir>/assets",
  "public": "/<srcDir>/public"
}

modules

通过 modules 配置可以拓展 Nuxt 的模块，比如： @pinia/nuxt @nuxt/image。

更多 modules 可参考 Nuxt Modules。

routeRules

通过 routeRules 配置，可以定义路由规则，可更改路由的渲染模式或分配基于路由的缓存策略。

builder

通过 builder 配置可指定用 Vite 还是 webpack 来构建应用，默认是 vite。如切换为 webpack 还需要安装额外的依赖。

应用配置

Nuxt3 提供了一个 app.config 的应用配置文件，用来定义在构建时确定的公共变量。例如：网站的标题、主题色以及任何不敏感的项目配置等信息。

export default defineAppConfig({
  title: "Hello Nuxt3 liujun"
  theme: {
    primary: "blue"
  }
})

然后我们就可以在 vue 文件中使用在 app.config 中定义的变量：

<script setup lang="ts">
const appConfig = useAppConfig()

console.log(appConfig.theme)
</script>

值得注意的是，app.config 配置文件中的选项不能使用 env 环境变量来覆盖，这与 runtimeConfig 不同。

最好不要将秘密或敏感的信息放在 app.config 文件中，该文件是客户端公开的配置文件。

两个配置（runtimeConifg、app.config）的区别： runtimeConfig 和 app.config 都用于向应用程序公开变量。对于这两个配置 Nuxt 官网也做出详细的对比。

要确定是否应该使用其中一种，以下是一些指导原则：runtimeConfig 是用来定义环境变量的，比如： 运行时需要公共变量指定的私有或公共 token。而 app.config 是用来定义公共变量的，比如：在构建时确定的公共 token、网站配置等。

总结

通过了解 Nuxt，到初始化 Nuxt 项目，再到了解 Nuxt 的相关配置，我们便完成对 Nuxt 的最基本的认识。

配置是开发项目过程中至关重要的环节，通过配置我们可以更灵活地开发项目，更便捷地去实现具体的业务需求，因此将 Nuxt 配置相关的内容作为认识 Nuxt 的第一环节是有必要的。

当我们完成对 Nuxt 的初识阶段，接下来就是和 Nuxt 的相识阶段。在相识阶段，我们会从广度上认识 Nuxt 的更多用法，究竟是什么魔力让 Nuxt 如此受欢迎，连尤大都称赞的全栈框架，我们确实得好好学学，那就让我们在与 Nuxt 相识阶段见吧。