第一章：项目概述与环境准备

大家好，我是你们这门课的主讲。今天咱们正式开干。

在动手敲代码之前，我觉得有必要先把「前后端分离」这个概念聊透。你想想看，很多新手一上来就急着写代码，结果写到一半发现架构选错了，那才叫痛苦。我刚开始带团队的时候，就吃过这个亏——项目做到一半，前端和后端代码搅在一起，改个页面还得重启整个服务，效率低得让人抓狂。

1.1 前后端分离到底是个啥？

说白了，就是把前端和后端拆成两个独立的项目。

前端只管页面展示和用户交互，后端只管提供数据和业务逻辑。它们之间通过 HTTP 接口（也就是 API）来通信。这样做的好处很明显：

  • 分工明确：前端团队和后端团队可以并行开发，互不干扰
  • 部署灵活：前端可以部署在 Nginx 上，后端可以部署在 Tomcat 上，各自独立
  • 扩展性强：后端接口写好了，前端可以换，移动端 App 也能用，甚至第三方也能调用

核心要点：前后端分离不是技术上的炫技，而是工程上的解耦。我见过太多项目因为耦合太紧，后期维护成本翻了好几倍。

1.2 技术栈选型：为什么是 Vue3 + SpringBoot？

这个问题其实挺多人问我的。市面上技术那么多，为什么偏偏选这两个？

嗯，我个人的习惯是：选技术栈要看生态和社区活跃度。

  • Vue3：上手快、文档好、组件化开发体验很棒。而且 Composition API 出来后，逻辑复用变得特别优雅。我在去年做的一个电商后台项目中，就用 Vue3 重构了老项目，开发效率提升了至少 30%。
  • SpringBoot：Java 后端的老牌框架，配置简单、开箱即用。你想想看，以前用 Spring 要配一堆 XML，现在 SpringBoot 一个注解搞定。我团队里新来的实习生，两周就能上手写接口。

我的建议：如果你是初学者，别贪多。先把 Vue3 和 SpringBoot 这一套吃透，再去学 React 或者微服务。贪多嚼不烂，这个道理你懂的。

1.3 开发工具安装：一步都不能少

好，理论说完了，咱们开始动手装环境。这部分我踩过不少坑，你跟着我的步骤来，能省很多时间。

1.3.1 Node.js 安装

Vue3 项目依赖 Node.js，它相当于前端的运行环境。

  1. 去官网下载 LTS 版本（长期支持版），别下最新的尝鲜版，容易出兼容问题
  2. 安装时一路 Next 就行，记得勾选「Add to PATH」
  3. 安装完成后，打开终端验证：node -v 和 npm -v

我曾经踩过的坑：有一次我装了最新版的 Node.js，结果项目里某个依赖包不兼容，折腾了一下午才找到原因。所以，老老实实用 LTS 版本，别给自己找麻烦。

1.3.2 JDK 安装

SpringBoot 基于 Java，所以 JDK 是必须的。我推荐用 JDK 17，稳定且支持长期维护。

  1. 从 Oracle 官网或 Adoptium 下载 JDK 17
  2. 配置环境变量 JAVA_HOME，并把 %JAVA_HOME%/bin 加到 Path 里
  3. 验证：java -version

小技巧：如果你电脑上装了多个 JDK 版本，记得在环境变量里把路径指对。我习惯用 JAVA_HOME 统一管理，切换版本时只改这一个变量就行。

1.3.3 Maven 安装

Maven 是 Java 项目的构建工具，用来管理依赖和打包。

  1. 下载 Maven 二进制包，解压到某个目录
  2. 配置 MAVEN_HOME 环境变量，并添加到 Path
  3. 验证：mvn -v
  4. 修改 conf/settings.xml，配置阿里云镜像，不然下载依赖慢到怀疑人生
<mirror>
  <id>aliyunmaven</id>
  <mirrorOf>central</mirrorOf>
  <name>阿里云公共仓库</name>
  <url>https://maven.aliyun.com/repository/public</url>
</mirror>

注意：不配置镜像的话，第一次构建项目可能要等十几分钟。我当年在公司配环境，同事没配镜像，结果一上午都在等下载。别学他。

1.3.4 MySQL 安装

数据库我们选 MySQL 8.0，够用且稳定。

  1. 下载 MySQL Installer，选择 Server Only 安装
  2. 设置 root 密码，建议记牢（我一般用 root123 这种简单密码，本地开发无所谓）
  3. 安装完成后，用命令行或 Navicat 连接测试

避坑指南：MySQL 8.0 默认使用 caching_sha2_password 加密方式，有些旧版客户端连不上。如果你遇到这个问题，可以改成 mysql_native_password。我曾经被这个坑过，折腾了半小时才发现是加密方式不兼容。

1.4 环境验证：确保一切就绪

工具都装好了，咱们来做个快速验证。打开终端，依次执行以下命令：

node -v          # 输出 v18.x.x 或类似
npm -v           # 输出 9.x.x 或类似
java -version    # 输出 openjdk 17.x.x
mvn -v           # 输出 Apache Maven 3.x.x
mysql --version  # 输出 mysql 8.x.x

如果都能正常输出版本号，恭喜你，环境准备完毕。如果哪个命令报错，别慌，检查一下环境变量配置，或者重启终端试试。

我的习惯：我会把这些版本号记在一个文本文件里，方便以后排查问题。你想想看，半年后你电脑重装了，或者换新电脑了，翻出这个文件就能快速恢复环境。

1.5 本章小结

这一章我们聊了前后端分离的概念，选了 Vue3 + SpringBoot 这套技术栈，还把开发环境搭好了。说白了，这些都是地基活，地基打不牢，后面盖楼肯定歪。

下一章，咱们就开始创建项目了。我会带着你从零搭建一个 Vue3 前端项目和一个 SpringBoot 后端项目，然后让它们「握手」通信。嗯，想想就有点小激动。

对了，如果你在安装过程中遇到任何问题，别憋着。去群里问，或者翻翻评论区，我基本每天都会看。咱们下章见。

← 上一章 📖 返回目录 下一章 →