Nuxt.js环境搭建 #

一、环境要求 #

在开始安装 Nuxt.js 之前，请确保你的开发环境满足以下要求：

1.1 Node.js版本 #

Nuxt 3 需要 Node.js 18.x 或更高版本。推荐使用 LTS（长期支持）版本。

bash

node -v

如果版本过低，请先升级 Node.js。

1.2 包管理器 #

Nuxt.js 支持多种包管理器：

包管理器	推荐程度	安装命令
pnpm	⭐⭐⭐	`npm install -g pnpm`
npm	⭐⭐	Node.js 自带
yarn	⭐⭐	`npm install -g yarn`
bun	⭐	`curl -fsSL https://bun.sh/install

推荐使用 pnpm，它具有更快的安装速度和更好的磁盘空间管理。

1.3 代码编辑器 #

推荐使用 VS Code，并安装以下扩展：

Vue - Official：Vue 语法高亮和智能提示
TypeScript Vue Plugin (Volar)：TypeScript 支持
ESLint：代码规范检查
Prettier：代码格式化

二、创建Nuxt.js项目 #

2.1 使用 nuxi 初始化（推荐） #

Nuxt.js 提供了官方的 CLI 工具 nuxi 来创建项目：

bash

npx nuxi@latest init <project-name>

例如：

bash

npx nuxi@latest init my-nuxt-app

2.2 使用包管理器创建 #

使用 pnpm：

bash

pnpm dlx nuxi@latest init my-nuxt-app

使用 yarn：

bash

yarn dlx nuxi@latest init my-nuxt-app

使用 bun：

bash

bunx nuxi@latest init my-nuxt-app

2.3 手动创建 #

如果你想从零开始创建项目：

bash

mkdir my-nuxt-app
cd my-nuxt-app

创建 package.json：

json

{
  "name": "my-nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "nuxt": "^3.10.0",
    "vue": "^3.4.0",
    "vue-router": "^4.2.0"
  }
}

安装依赖：

bash

pnpm install

创建 app.vue：

vue

<template>
  <div>
    <h1>Hello Nuxt!</h1>
  </div>
</template>

三、项目启动 #

3.1 开发模式 #

进入项目目录，启动开发服务器：

bash

cd my-nuxt-app
pnpm dev

默认情况下，开发服务器运行在 http://localhost:3000。

3.2 指定端口 #

可以通过命令行参数指定端口：

bash

pnpm dev --port 8080

或者在 nuxt.config.ts 中配置：

typescript

export default defineNuxtConfig({
  devServer: {
    port: 8080
  }
})

3.3 指定主机 #

允许外部访问：

bash

pnpm dev --host

或配置：

typescript

export default defineNuxtConfig({
  devServer: {
    host: '0.0.0.0',
    port: 3000
  }
})

四、Nuxt.js配置 #

4.1 nuxt.config.ts #

nuxt.config.ts 是 Nuxt.js 的核心配置文件：

typescript

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss'
  ],
  app: {
    head: {
      title: 'My Nuxt App',
      meta: [
        { name: 'description', content: 'My amazing Nuxt application' }
      ]
    }
  },
  runtimeConfig: {
    public: {
      apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
    }
  }
})

4.2 TypeScript配置 #

Nuxt.js 自动生成 TypeScript 配置。如果需要自定义，可以创建 tsconfig.json：

json

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true
  }
}

4.3 环境变量 #

创建 .env 文件：

env

NUXT_PUBLIC_API_BASE=https://api.example.com
NUXT_SECRET_KEY=your-secret-key

在代码中使用：

typescript

const config = useRuntimeConfig()
console.log(config.public.apiBase)

五、常用NPM脚本 #

命令	说明
`pnpm dev`	启动开发服务器
`pnpm build`	构建生产版本
`pnpm generate`	生成静态站点
`pnpm preview`	预览生产构建
`pnpm postinstall`	准备 Nuxt 开发环境

六、开发工具 #

6.1 Nuxt DevTools #

Nuxt DevTools 是一个强大的开发者工具，可以帮助你：

查看组件树
检查状态管理
分析路由配置
查看服务端日志

启用 DevTools：

typescript

export default defineNuxtConfig({
  devtools: { enabled: true }
})

6.2 Vue DevTools #

安装浏览器扩展 Vue DevTools，可以在浏览器中调试 Vue 组件。

6.3 ESLint配置 #

安装 ESLint：

bash

pnpm add -D eslint @nuxt/eslint-config

创建 .eslintrc.cjs：

javascript

module.exports = {
  extends: ['@nuxt/eslint-config']
}

6.4 Prettier配置 #

安装 Prettier：

bash

pnpm add -D prettier

创建 .prettierrc：

json

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 100
}

七、常见问题 #

7.1 端口被占用 #

如果 3000 端口被占用，可以：

bash

pnpm dev --port 3001

7.2 Node版本不兼容 #

使用 nvm 或 fnm 切换 Node.js 版本：

bash

nvm install 20
nvm use 20

7.3 依赖安装失败 #

尝试清除缓存：

bash

pnpm store prune
rm -rf node_modules
pnpm install

7.4 热更新不生效 #

检查文件系统是否支持监听，或尝试：

bash

pnpm dev --watch

八、总结 #

本章介绍了 Nuxt.js 开发环境的搭建：

确保 Node.js 版本 >= 18
推荐使用 pnpm 作为包管理器
使用 npx nuxi init 创建项目
配置开发工具提升开发体验

环境搭建完成后，让我们进入下一章，创建第一个 Nuxt.js 应用。