springboot vue环境安装
时间: 2023-09-06 21:07:04 浏览: 121
安装SpringBoot和Vue.js的环境需要分别安装Java和Node.js,并且在安装Vue.js时需要使用npm(Node.js的包管理器)。
下面是安装过程的详细步骤:
1. 安装Java
- 在Java官网下载JDK:https://www.oracle.com/java/technologies/javase-jdk16-downloads.html。
- 安装JDK,将JDK的路径添加到环境变量中。
2. 安装Node.js
- 在Node.js官网下载LTS版本:https://nodejs.org/en/download/。
- 安装Node.js,将Node.js的路径添加到环境变量中。
3. 安装Vue.js
- 打开命令行工具,输入以下命令安装Vue.js:
```
npm install -g vue-cli
```
- 等待安装完成后,输入以下命令创建Vue.js项目:
```
vue init webpack my-project
```
- 进入项目目录,输入以下命令启动Vue.js项目:
```
npm run dev
```
4. 安装SpringBoot
- 在SpringBoot官网下载最新版本:https://spring.io/projects/spring-boot#learn。
- 解压缩下载的文件,将SpringBoot的路径添加到环境变量中。
5. 在IDE中创建SpringBoot项目
- 在IDE中创建SpringBoot项目,选择Maven项目,添加SpringBoot的依赖。
- 在pom.xml文件中添加以下依赖:
```
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
```
- 在src/main/java目录下创建Java类,添加@Controller注解,编写SpringBoot的控制器。
- 运行SpringBoot项目,访问http://localhost:8080/,可以看到控制器返回的内容。
6. 将Vue.js集成到SpringBoot项目中
- 在IDE中创建SpringBoot项目,选择Maven项目,添加SpringBoot的依赖。
- 在pom.xml文件中添加以下依赖:
```
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
```
- 在src/main/resources/static目录下创建Vue.js项目,将Vue.js项目的文件复制到该目录下。
- 在src/main/resources/templates目录下创建index.html文件,添加以下内容:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Vue.js App</title>
</head>
<body>
<div id="app"></div>
<script src="/static/js/app.js"></script>
</body>
</html>
```
- 在src/main/java目录下创建Java类,添加@Controller注解,编写SpringBoot的控制器。
- 运行SpringBoot项目,访问http://localhost:8080/,可以看到Vue.js的页面。
阅读全文