Frontend Vue Learning Nuxt

Nuxt 基础总述

Nuxt 基础总述

前言

Nuxt 是一个基于 Vue.js 的开源全栈式框架，旨在简化服务端渲染（SSR）和静态网站生成（SSG）的开发过程。它提供了许多开箱即用的功能，如自动路由、状态管理、API 集成等，使开发者能够更专注于业务逻辑而非配置细节。

1. Nuxt 的核心特性

  • 服务端渲染（SSR）：提升首屏加载速度和 SEO 性能。
  • 静态网站生成（SSG）：预渲染页面，适合内容驱动型网站。
  • 自动路由：基于文件系统的路由，根据 pages/ 目录结构定义路由，无需手动配置。
  • 自动导入：Nuxt 自动导入组件、组合式函数和 Vue.js API，以便在你的应用中无需显式导入即可使用。
  • TypeScript 支持：内置对 TypeScript 的支持，提升代码质量。
  • Vue 3 支持：兼容最新的 Vue 3 特性和生态。
  • 组合式 API：支持 Vue 3 的组合式 API，提升代码复用性。
  • SEO 优化：内置对元标签和动态路由的支持，提升搜索引擎排名。
  • 开发者工具：集成 Vue Devtools，提升调试体验。
  • 支持多种渲染模式：如 SPA、SSR、SSG 和混合模式，满足不同项目需求。
  • 强大的配置选项：通过 nuxt.config.js 文件灵活配置项目。

2. Nuxt 的安装与快速开始

创建项目

前置条件：

  • Node.js（版本 20 及以上）,推荐使用LTS（长期支持）版本
  • npm 、yarn 或 pnpm 包管理器
  • 文本编辑器（官方推荐 VSCode）配合官方Vue(Official)插件使用
  • 终端

在终端创建项目：

  • 使用npm 、yarn 或 pnpm创建项目：
1

npm/yarn/pnpm create nuxt <project-name>

在VSCode中打开项目文件夹：

1

code <project-name>

1

cd <project-name>

注意：<project-name> 替换为你的项目名称。

运行项目

进入项目目录后，安装依赖并启动开发服务器：

1

npm/yarn/pnpm run dev

打开浏览器访问 http://localhost:3000，即可看到 Nuxt 应用的欢迎页面。

3. Nuxt 项目结构

Nuxt4官方项目结构如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

.
├── .nuxt/                  # Nuxt 自动生成的文件夹
├── .output/                 # Nuxt 构建输出目录
├── app/
│   ├── assets/             # 静态资源（CSS、图片等）
│   ├── components/         # Vue 组件
│   ├── composables/        # 可复用的组合式函数
│   ├── layouts/            # 布局组件
│   ├── middleware/         # 中间件
│   ├── pages/              # 页面组件
│   ├── plugins/            # 插件
│   ├── utils/             # 工具函数
│   ├── app.vue/            # 根组件
│   ├── app.config.ts       # 应用配置
│   └── error.vue           # 错误页面组件
├── content/                # 内容文件（如 Markdown）
├── modules/                # 公共模块
├── node_modules/           # 依赖包
├── public/                 # 公共静态文件
├── server/                 # 服务器端代码（API 路由等）
├── shared/                 # 共享代码
├── .env                  # 环境变量文件
├── .gitignore              # Git 忽略文件
├── .nuxtignore             # Nuxt 忽略文件
├── .nuxtrc                # Nuxt 配置文件
├── nuxt.config.ts         # Nuxt 配置文件
├── package.json            # 项目配置文件
└──  tsconfig.json          # TypeScript 配置文件

4. Nuxt 的核心概念

页面与路由

在 pages/ 目录下创建 Vue 文件，Nuxt 会自动根据文件结构生成路由。例如：

1
2
3
4
5
6

pages/
├── index.vue          # 路由：/
├── about.vue          # 路由：/about
└── blog/
    ├── index.vue      # 路由：/blog
    └── [id].vue       # 动态路由：/blog/:id

布局

布局组件位于 layouts/ 目录，用于定义应用的整体结构。默认布局文件为 default.vue，可以通过在页面组件中使用 definePageMeta 指定不同的布局：

1
2
3
4
5

<script setup>
definePageMeta({
  layout: 'custom' // 使用 layouts/custom.vue 作为布局
})
</script>

组件

组件存放在 components/ 目录，可以在页面和布局中直接使用。Nuxt 支持自动导入组件，无需手动导入：

1
2
3

<template>
  <MyComponent />
</template>

组合式函数

组合式函数存放在 composables/ 目录，用于封装可复用的逻辑。例如：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// composables/useCounter.ts

export function useCounter() {
//这里ref被nuxt自动导入
  const count = ref(0);
  const increment = () => {
    count.value++;
  };
  return { count, increment };
}

插件

插件存放在 plugins/ 目录，用于扩展 Nuxt 功能。例如，注册第三方库：

1
2
3
4
5
6
7
8
9

// plugins/axios.ts
import axios from 'axios';
export default defineNuxtPlugin(() => {
  return {
    provide: {
      axios: axios.create({ baseURL: 'https://api.example.com' })
    }
  };
});

中间件

中间件存放在 middleware/ 目录，用于在页面渲染前执行逻辑。例如，身份验证：

1
2
3
4
5
6
7

// middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const isAuthenticated = false; // 示例：实际应检查用户状态
  if (!isAuthenticated && to.path !== '/login') {
    return navigateTo('/login');
  }
});

配置文件

  • nuxt.config.ts：项目的主要配置文件，用于配置模块、插件、路由等。
1
2
3
4
5
6
7
8

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/content', '@nuxtjs/axios'],
  css: ['~/assets/css/main.css'],
  build: {
    transpile: ['some-dependency']
  }
});

runtimeConfig 用于存储运行时配置,可以将环境变量等值暴露给应用其他部分。默认情况下, runtimeConfig 中的值不会暴露给客户端,除非将其放在 public 对象中。

1
2
3
4
5
6
7

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBase: process.env.API_BASE || 'https://api.example.com'
    }
  }
});

runtimeConfig 中的值可以通过 useRuntimeConfig 组合式函数访问，且可以通过环境变量(.env)覆盖：

1
2

const config = useRuntimeConfig();
console.log(config.public.apiBase); // 访问公共配置
  • .env：环境变量文件，用于存储敏感信息，如 API 密钥。
1
2

API_BASE=https://api.example.com
API_KEY=your_api_key_here
  • tsconfig.json：TypeScript 配置文件。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },
    "types": ["@nuxt/types", "@nuxtjs/axios"]
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}
  • package.json：项目依赖和脚本配置文件。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

{
  "name": "my-nuxt-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^4.0.0",
    "@nuxt/content": "^2.0.0",
    "@nuxtjs/axios": "^5.13.6"
  },
  "devDependencies": {
    "typescript": "^4.5.4"
  }
}
  • app.config.ts：应用程序配置文件，用于暴露构建时可确定的公共变量。
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// app/app.config.ts
export default defineAppConfig({
  title: 'Hello Nuxt',
  theme: {
    dark: true,
    colors: {
      primary: '#ff0000',
      secondary: '#00ff00',
    }
  }
})

app.config.ts 中的配置可以通过 useAppConfig 组合式函数访问，但与runtimeConfig 中的配置不同，app.config.ts 中的配置在构建时是静态的，而 runtimeConfig 中的配置可以在运行时动态变化，且app.config.ts中的变量不可以通过环境变量(.env)覆盖。

1
2

const appConfig = useAppConfig();
console.log(appConfig.title); // 访问应用标题

5. 总结

Nuxt 是一个功能强大的全栈式框架，十分适合用于构建现代 Web 应用,但Nuxt中有着许多约定俗成的规则，需要花费时间去熟悉和掌握，具有一定的学习成本。通过本文的介绍，希望你对 Nuxt 有了一个初步的了解，能够开始使用它来构建你的下一个项目。

6. 参考资料

Licensed under CC BY-NC-SA 4.0