🏠

使用 Nuxt3 构建现代网站

从安装到运行的完整指南

讲师：乌鸦哥

开始之前：检查你的电脑

就像做菜之前要准备食材一样

第0步：检查 Node.js

Nuxt3 需要 Node.js 版本 16.10.0 或更高

node --version

如果显示类似 v18.17.0 就说明已安装

没有的话需要先去 nodejs.org 下载安装

检查 npm（包管理器）

npm --version

这个通常和 Node.js 一起安装

看到版本号就说明一切正常！

选择一个合适的位置

  • 在桌面创建一个 projects 文件夹
  • 或者在文档里创建 我的网站项目 文件夹
  • 总之找个你能记住的地方

就像整理房间，东西要放在固定位置

第一步：创建 Nuxt3 项目

现在开始真正的安装过程

打开终端

  • Windows：按 Win+R，输入 cmd 或使用 PowerShell
  • Mac：按 Cmd+空格，搜索 "终端" 或 "Terminal"
  • Linux：Ctrl+Alt+T

别怕黑屏幕，它只是看起来酷一点 😎

进入你的项目文件夹

cd Desktop/projects

或者你创建的其他文件夹

cd 就是 "change directory" 的缩写，意思是换文件夹

运行创建命令

npx nuxi@latest init my-nuxt-app

这个命令做了什么？

  • npx：运行工具（不用安装到电脑上）
  • nuxi：Nuxt3 的命令行工具
  • init：创建新项目
  • my-nuxt-app：你的项目名字（可以改）

npx 到底是什么？

让我用一个生活中的例子来解释：

  • npm：像是去商店买工具回家存着
  • npx：像是去五金店借工具用完就还

你不需要修水管，为什么要买扳手？用完就还更合理！

npx 的好处

  • 🚀 总是最新版：每次都下载最新的工具
  • 💾 节省空间：用完就删，不占硬盘
  • 🔒 避免冲突：不会和其他版本打架
  • ⚡ 即用即走：需要什么工具就临时下载

就像叫外卖，不用自己买菜做饭！

完整命令拆解

npx nuxi@latest init my-nuxt-app

📦 npx = "我要临时借个工具"

🔧 nuxi = "工具名叫 nuxi"

✨ @latest = "要最新版本的"

🏗️ init = "用这个工具创建项目"

📁 my-nuxt-app = "项目叫这个名字"

等待下载...

你会看到类似这样的输出：

✨ Creating Nuxt 3 project...
📁 Creating project folder: my-nuxt-app
🎉 Project created successfully!

这个过程可能需要 1-3 分钟

取决于你的网络速度，喝口水放松一下 💧

进入新创建的项目

cd my-nuxt-app

现在你在项目文件夹里了

可以用 ls（Mac/Linux）或 dir（Windows）看看里面有什么

第二步：安装项目依赖

下载项目需要的所有"配件"

运行安装命令

npm install

你会看到很多下载信息滚动

这是正常的！npm 在下载几百个小工具

就像买了一台电脑，还要装各种软件

安装过程中可能看到的内容

npm WARN deprecated...
added 1247 packages, and audited 1248 packages
✅ Installation completed!

WARN 提示不用担心，通常只是版本兼容提醒

看到 Installation completed 就成功了！

常见问题：网络太慢怎么办？

可以使用国内的镜像源：

npm install --registry=https://registry.npmmirror.com

这就像换一个离你更近的商店买东西 🏪

第三步：启动项目

让我们把网站跑起来！

启动开发服务器

npm run dev

你会看到类似这样的输出：

Nuxt 3.8.0 with Nitro 2.7.2
  ➜ Local:   http://localhost:3000/
  ➜ Network: http://192.168.1.100:3000/

✔ Vite server built in 1234ms
ℹ Ready in 2.3s

打开浏览器测试

  1. 打开你的浏览器（Chrome、Safari、Firefox 都可以）
  2. 在地址栏输入：http://localhost:3000
  3. 按回车键

🎉 看到 Nuxt 欢迎页面就说明成功了！

如果 3000 端口被占用怎么办？

Nuxt 会自动选择其他端口，比如 3001

Port 3000 is already in use
➜ Local:   http://localhost:3001/

用显示的端口号就行，不用担心

安装完成！检查清单

确认一下是否一切正常

✅ 安装成功的标志

  • 终端显示 "Ready in X.Xs"
  • 浏览器能正常访问 localhost:3000
  • 看到 Nuxt 的欢迎页面和绿色对勾
  • 页面上有 "Welcome to Nuxt!" 字样

如果遇到问题...

  • 端口错误：重启终端，重新运行
  • 权限错误：在命令前加 sudo（Mac/Linux）
  • 网络错误：检查网络连接或使用镜像源
  • Node.js 版本太低：升级到最新版本

99% 的问题都能通过重启解决 🔄

为什么选择 Nuxt3？

让我来解答一些常见疑问

疑问1：为什么不是普通的 HTML/CSS/JS？

  • Nuxt3 其实还是包含 HTML、CSS、JavaScript
  • 只是把它们组织得更加优雅和直观
  • 就像把散装的乐高积木装进了收纳盒

Vue vs Nuxt 的区别

  • Vue：只能做单页应用（SPA），类似管理后台
  • Nuxt：既能做单页应用，又能做多页网站
  • Nuxt 就是 Vue 的"升级豪华版"

为什么直接学 Nuxt？

  • 商业项目需要 SEO 友好的网站
  • 加载速度更快，用户体验更好
  • 就像学开车直接学自动挡，而不是手动挡

Nuxt 更直观的原因

  • pages 文件夹 = 网站页面
  • components 文件夹 = 可重用组件
  • assets 文件夹 = 图片、样式等资源
  • 英文不好也没关系，看文件夹名就知道用途！

关于 AI 编程的说明

你可能会疑惑...

为什么不一开始就用 AI？

  • 学会看懂代码比让 AI 写代码更重要
  • 如果不理解基础，AI 写的代码你也看不懂
  • 就像学数学，你得先会加减法，再学乘除法

我们的学习策略

  1. 先让项目跑起来（有成就感）
  2. 再慢慢理解每个部分的作用
  3. 最后用 AI 加速开发效率

这样学习不会"晕头转向"

接下来做什么？

项目已经跑起来了，让我们继续探索

下节课预告

  • 理解 Nuxt3 的文件结构
  • 创建你的第一个页面
  • 添加样式让页面更美观
  • 开始用 AI 辅助开发

谢谢大家！

记住：编程就像学骑自行车

一开始可能会摔跤，但掌握了就再也不会忘记

💪 加油，未来的全栈工程师们！