一、通用前置步骤:克隆项目
所有项目第一步均为从 Git 拉取代码到本地,操作如下:
-
打开命令行(终端 / CMD),执行克隆命令:
git clone <项目仓库地址>
(地址从 Git 仓库复制,如 GitHub/GitLab/Gitee) -
进入项目文件夹:
cd <克隆后的项目名称>
二、前端项目运行(Vue / 微信小程序)
(一)Vue 项目
1. 准备环境
-
安装 Node.js(自带 npm 包管理器):从 Node.js 官网 下载安装。也可通过nvm安装nodejs:nvm和nodejs安装 - 韩熙隐ario - 博客园
-
验证环境:命令行执行
node -v
和npm -v
,能显示版本号即成功
2. 安装依赖
-
确保已进入 Vue 项目根目录,执行命令:
npm install
(简写npm i
) -
作用:npm 读取
package.json
(依赖清单),自动下载所有项目所需依赖,生成node_modules
文件夹和package-lock.json
(锁定依赖版本)
3. 启动项目
-
查看
package.json
中scripts
下的启动命令(通常是dev
或serve
) -
执行启动命令:
npm run dev
(或npm run serve
) -
启动成功后,按命令行提示在浏览器访问地址(如
http://localhost:8080
)
(二)微信小程序项目
1. 准备环境
-
安装 微信开发者工具:从 微信公众平台 下载安装
-
安装 Node.js(若项目有第三方依赖):同 Vue 项目环境准备
2. 导入项目
-
打开微信开发者工具,点击「导入项目」
-
选择克隆后的小程序项目文件夹,填写 AppID(测试可用「测试号」,正式项目需用官方 AppID)
3. 安装依赖(按需)
-
若项目有第三方依赖(如 UI 组件库):打开命令行,进入项目根目录,执行
npm install
-
若项目仅用原生 API:无需此步骤
4. 启动项目
- 在微信开发者工具中点击「编译」按钮,工具自动构建并在模拟器运行,可连接手机真机调试
三、后端项目运行(SpringBoot)
1. 准备环境
-
安装 JDK(推荐 JDK 11/17,需匹配项目要求):从 Oracle 官网 或国内镜像下载,配置
JAVA_HOME
环境变量 -
验证 JDK:命令行执行
java -version
,显示版本号即成功 -
构建工具(Maven/Gradle,IDE 可自带):
-
若用 Maven:安装后配置
MAVEN_HOME
,执行mvn -v
验证 -
若用 Gradle:安装后配置
GRADLE_HOME
,执行gradle -v
验证
-
2. 导入项目
-
打开 IDE(推荐 IntelliJ IDEA),点击「Open」,选择克隆后的 SpringBoot 项目文件夹
-
IDE 自动识别项目类型(Maven/Gradle),点击「Import」确认导入
3. 自动下载依赖
-
IDE 导入后,会读取配置文件(Maven 读
pom.xml
,Gradle 读build.gradle
),自动从 Maven 仓库下载依赖 -
若依赖下载慢:在 IDE 中配置国内镜像(如阿里云镜像);若下载失败:点击 IDE 中的「Reimport」(Maven)或「Refresh Gradle Project」(Gradle)刷新
4. 启动项目
-
在 IDE 中找到 启动类(类名含
Application
,如DemoApplication
,类上有@SpringBootApplication
注解) -
右键点击启动类,选择「Run 启动类名」,启动成功后控制台会显示 “Started XXXApplication in X seconds”
-
项目默认运行在 8080 端口,可在
application.properties
/application.yml
中修改端口
四、关键差异总结
项目类型 | 核心环境 | 依赖工具 | 配置文件 | 启动方式 |
---|---|---|---|---|
Vue | Node.js | npm | package.json | 命令行 npm run dev |
小程序 | 微信开发者工具 | npm | package.json | 工具「编译」按钮 |
SpringBoot | JDK + IDE | Maven/Gradle | pom.xml/build.gradle | IDE 运行启动类 |