第2章：前端与开发环境前置准备

1. 必备基础回顾（Vue 3 核心语法、ES6+、Node.js 基础）

在学习 Nuxt.js 之前，你需要掌握一些基础的前端知识，包括 Vue 3 核心语法、ES6+ 语法和 Node.js 基础。

1.1 Vue 3 核心语法

1.1.1 基本语法

• 模板语法：使用插值表达式 显示数据
• 指令：使用 v-bind、v-if、v-for 等指令
• 事件处理：使用 v-on 或 @ 绑定事件
• 计算属性：使用 computed 计算属性
• 监听器：使用 watch 监听数据变化

1.1.2 组件系统

• 组件定义：使用 defineComponent 定义组件
• Props：使用 defineProps 接收父组件传递的数据
• Emits：使用 defineEmits 向父组件传递事件
• Slots：使用插槽实现内容分发

1.1.3 Composition API

• setup：组件的入口函数
• ref：创建响应式数据
• reactive：创建响应式对象
• computed：创建计算属性
• watch：监听数据变化
• onMounted、onUnmounted 等生命周期钩子

1.2 ES6+ 语法

1.2.1 箭头函数

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

1.2.2 解构赋值

// 对象解构
const { name, age } = user;

// 数组解构
const [first, second] = array;

1.2.3 模板字符串

const name = 'John';
const message = `Hello, ${name}!`;

1.2.4 let/const

// let 声明可变变量
let count = 0;
count = 1;

// const 声明不可变变量
const name = 'John';

1.2.5 模块化

// 导出
export const add = (a, b) => a + b;

// 导入
import { add } from './utils';

1.3 Node.js 基础

1.3.1 Node.js 概念

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它允许在服务器端运行 JavaScript 代码。

1.3.2 npm 包管理

• npm init：初始化项目
• npm install：安装依赖
• npm run：运行脚本
• npm publish：发布包

1.3.3 package.json

package.json 文件包含了项目的配置信息，如项目名称、版本、依赖等。

2. 开发工具安装（VS Code + 必备插件：Volar、ESLint、Prettier）

2.1 VS Code 安装

1. 访问 VS Code 官网
2. 下载适合你操作系统的版本
3. 按照安装向导完成安装

2.2 必备插件

2.2.1 Volar

• 作用：Vue 3 官方推荐的 IDE 支持插件
• 功能：提供 Vue 3 语法高亮、智能提示、代码格式化等
• 安装：在 VS Code 扩展商店搜索 "Volar" 并安装

2.2.2 ESLint

• 作用：代码质量检查工具
• 功能：检查代码中的语法错误、潜在问题等
• 安装：在 VS Code 扩展商店搜索 "ESLint" 并安装

2.2.3 Prettier

• 作用：代码格式化工具
• 功能：自动格式化代码，保持代码风格一致
• 安装：在 VS Code 扩展商店搜索 "Prettier" 并安装

2.2.4 其他推荐插件

• Nuxt：Nuxt.js 官方推荐的 VS Code 插件
• GitLens：增强 Git 功能
• Path Intellisense：路径智能提示
• Auto Import：自动导入模块

3. Node.js 与包管理器配置（Node.js 18+ 版本要求、pnpm/npm/yarn 选型）

3.1 Node.js 安装

Nuxt 3 要求 Node.js 18+ 版本，因此你需要安装或升级到最新版本的 Node.js。

3.1.1 安装 Node.js

1. 访问 Node.js 官网
2. 下载 LTS 版本（长期支持版）
3. 按照安装向导完成安装
4. 验证安装：打开终端，运行 node -v 和 npm -v 命令

3.1.2 升级 Node.js

如果你已经安装了 Node.js，但版本低于 18，可以使用以下方法升级：

• 使用 nvm（推荐）：Node Version Manager，可以管理多个 Node.js 版本
• 重新安装：下载最新版本并覆盖安装

3.2 包管理器选型

Nuxt.js 支持多种包管理器，包括 npm、pnpm 和 yarn。

3.2.1 npm

• 默认包管理器：Node.js 内置
• 使用方法：npm install、npm run dev 等
• 优势：使用广泛，生态丰富

3.2.2 pnpm

• 性能优势：比 npm 更快，占用更少的磁盘空间
• 安装：npm install -g pnpm
• 使用方法：pnpm install、pnpm dev 等
• 优势：更快的安装速度，更节省空间

3.2.3 yarn

• 特性：缓存机制，并行安装
• 安装：npm install -g yarn
• 使用方法：yarn install、yarn dev 等
• 优势：稳定的依赖管理

3.3 配置包管理器

3.3.1 配置 npm 镜像（可选）

为了加快依赖安装速度，可以配置 npm 镜像：

# 配置淘宝镜像
npm config set registry https://registry.npmmirror.com/

3.3.2 配置 pnpm 镜像（可选）

# 配置淘宝镜像
pnpm config set registry https://registry.npmmirror.com/

3.3.3 配置 yarn 镜像（可选）

# 配置淘宝镜像
yarn config set registry https://registry.npmmirror.com/

4. 第一个 Nuxt 程序：在线 playground 快速体验

如果你想快速体验 Nuxt.js，可以使用官方提供的在线 playground，无需在本地安装环境。

4.1 访问在线 playground

1. 访问 Nuxt Playground
2. 你将看到一个基于浏览器的 Nuxt 项目
3. 可以直接在浏览器中编辑代码，实时预览效果

4.2 体验核心特性

在 playground 中，你可以体验以下核心特性：

• 自动导入：无需手动导入组件和 API
• 约定式路由：在 pages 目录下创建文件自动生成路由
• 数据获取：使用 useAsyncData 和 useFetch 获取数据
• 布局系统：使用 layouts 目录创建布局

4.3 创建简单页面

1. 在 playground 中，创建 pages/index.vue 文件：

<template>
  <div>
    <h1>Hello Nuxt!</h1>
    <p>Welcome to Nuxt.js playground</p>
  </div>
</template>

2. 创建 pages/about.vue 文件：

<template>
  <div>
    <h1>About Page</h1>
    <p>This is the about page</p>
  </div>
</template>

3. 在浏览器中导航到 / 和 /about 路径，查看效果

4.4 体验数据获取

创建 pages/api-data.vue 文件：

<template>
  <div>
    <h1>API Data</h1>
    <div v-if="pending">Loading...</div>
    <div v-else-if="error">Error: {{ error.message }}</div>
    <div v-else>
      <h2>{{ data.title }}</h2>
      <p>{{ data.body }}</p>
    </div>
  </div>
</template>

<script setup>
const { data, pending, error } = useFetch('https://jsonplaceholder.typicode.com/posts/1')
</script>

小结

本章介绍了学习 Nuxt.js 所需的前置知识，包括 Vue 3 核心语法、ES6+ 语法和 Node.js 基础，以及开发工具的安装和配置。通过本章的学习，你应该已经准备好开始学习 Nuxt.js 的核心特性了。

在接下来的章节中，我们将学习 Nuxt.js 的项目创建、目录结构、路由系统等核心特性，帮助你更深入地理解和使用 Nuxt.js。