第一章：项目初始化与环境搭建
如果你是个前端程序员或者Java程序员，正在学习Nuxt、SSR或者Java
这将会是非常适合你的教程。 如果你想搭建自己的知识付费系统，这个项目拿来即用。你可以用它来搭建任何类型的网站。比如搭建一个个人源码站、个人摄影站、个人收藏站等等知识付费网站。
放一些图
🛠️ 环境准备
在开始之前，确保你的开发环境已经准备就绪：
Node.js 环境
# 检查 Node.js 版本（推荐 18.x 或更高）
node --version
# 检查 npm 版本
npm --version
如果还没有安装 Node.js，建议使用 nvm 来管理 Node.js 版本：
# 安装最新的 LTS 版本
nvm install --lts
nvm use --lts
包管理器选择
现代前端开发中，我们有多种包管理器可以选择：
- npm: Node.js 自带，最广泛使用
- yarn: Facebook 开发，速度较快
- pnpm: 磁盘空间效率高，速度快
本项目我们选择 pnpm，因为它在依赖管理和磁盘空间利用上有显著优势：
# 全局安装 pnpm
npm install -g pnpm
# 验证安装
pnpm --version
🚀 创建项目
方式一：使用 Nuxt CLI（推荐）
# 创建新的 Nuxt 3 项目
npx nuxi@latest init web-lms-frontend
# 进入项目目录
cd web-lms-frontend
# 安装依赖
pnpm install
方式二：手动创建
如果你想更深入地理解项目结构，也可以手动创建：
# 创建项目目录
mkdir web-lms-frontend
cd web-lms-frontend
# 初始化 package.json
pnpm init
然后手动安装 Nuxt.js：
pnpm add nuxt@latest
📁 项目结构解析
创建完成后，让我们来看看项目的基本结构：
web-lms-frontend/
├── .nuxt/ # Nuxt 自动生成的文件（不要手动修改）
├── .output/ # 构建输出目录
├── assets/ # 静态资源（CSS、图片等）
├── components/ # Vue 组件
├── composables/ # 组合式函数
├── layouts/ # 布局组件
├── middleware/ # 中间件
├── pages/ # 页面组件（自动路由）
├── plugins/ # 插件
├── public/ # 公共静态文件
├── server/ # 服务端代码
├── utils/ # 工具函数
├── app.vue # 根组件
├── nuxt.config.ts # Nuxt 配置文件
├── package.json # 项目依赖配置
└── tsconfig.json # TypeScript 配置
关键文件说明
app.vue - 应用的根组件：
<template>
<div>
<NuxtWelcome />
</div>
</template>
nuxt.config.ts - Nuxt 的核心配置文件：
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: true }
})
package.json - 项目的依赖和脚本配置：
{
"name": "nuxt-app",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@nuxt/devtools": "latest",
"nuxt": "^3.8.0"
}
}
🏃♂️ 启动开发服务器
现在让我们启动开发服务器，看看我们的项目：
# 启动开发服务器
pnpm dev
如果一切顺利，你会看到类似这样的输出：
Nuxt 3.8.0 with Nitro 2.7.2
> Local: http://localhost:3000/
> Network: http://192.168.1.100:3000/
ℹ Vite client warmed up in 1234ms
✔ Nuxt DevTools is enabled (v1.0.0)
打开浏览器访问 http://localhost:3000，你应该能看到 Nuxt 的欢迎页面。
🔧 基础配置优化
TypeScript 支持
Nuxt 3 默认支持 TypeScript，但我们可以进一步优化配置：
// nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
typescript: {
strict: true,
typeCheck: true
}
})
开发工具配置
为了提升开发体验，我们可以配置一些有用的开发工具：
// nuxt.config.ts
export default defineNuxtConfig({
devtools: { enabled: true },
css: ['~/assets/css/main.css'],
modules: [
'@nuxtjs/eslint-module',
'@nuxtjs/tailwindcss'
]
})
🎉 小结
恭喜你！你已经成功创建了第一个 Nuxt.js 项目。虽然现在看起来只是一个简单的欢迎页面，但这已经是一个功能完整的现代前端应用的基础。
在这个过程中，我们：
- ✅ 搭建了完整的开发环境
- ✅ 理解了现代前端项目的基本结构
- ✅ 学会了使用包管理器管理依赖
- ✅ 启动了第一个开发服务器
下一章，我们将深入探讨 Nuxt.js 的配置系统，学习如何根据项目需求进行定制化配置。
获取更多文章
欢迎关注微信公众号：Pub的知识花园
获取更多文章 项目链接：http://code.iwali.cn
