一文教会你如何搭建vue+springboot项目

Vue是一个渐进式的JavaScript框架，而Spring Boot是一个用于开发Java应用程序的开发框架。Vue和Spring Boot配合使用可以创建适用于多平台(Web，PC，移动设备)的全栈式应用程序。本文主要介绍如何搭建Vue和Spring Boot的全栈式项目。

步：安装Vue

搭建Vue和Spring Boot项目的 步就是安装Vue。在安装Vue之前，需要确保本地已经安装了Node.js和npm。

使用以下命令安装Vue CLI：

npm install -g vue-cli

在安装完Vue CLI后，在你想要搭建项目的目录下，执行以下命令：

vue init webpack my-project

其中"my-project"是你的项目名称。执行该命令后，Vue CLI会为你创建一个基本的Vue项目骨架。

第二步：安装所需的依赖

搭建Vue和Spring Boot项目的第二步是安装所需的依赖。在项目目录下，执行以下命令：

cd my-project
npm install

在这个命令执行后，npm会自动下载和安装项目需要的依赖。

第三步：配置代理

在使用Vue和Spring Boot开发全栈式项目时，必须配置代理，以便Vue可以与Spring Boot通信。在项目目录下，编辑config/index.js文件，在“dev”配置中添加以下内容：

proxyTable: {
  '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

在这个配置中，所有以“/api”开头的请求都会被代理到“http://localhost:8080”这个地址上。

第四步：创建Spring Boot项目

下一步是创建Spring Boot项目。在IDE中创建一个新的Spring Boot项目，并在pom.xml中添加对以下依赖的引用：

<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

这个依赖可以让Spring Boot使用内嵌的Tomcat服务器运行Web应用程序。

第五步：创建RESTful服务端点

在Spring Boot项目中，创建RESTful服务端点以响应Vue请求。在Controller类中添加一个Hello World RESTful服务端点：

@RestController
public class HelloController {
 
    @RequestMapping("/hello")
    public String hello() {
        return "Hello World!";
    }
 
}

这个服务端点简单地返回“Hello World！”字符串。

第六步：测试项目

现在测试项目。运行Spring Boot项目，并在Vue项目（通常在localhost:8081）中创建一个API文件(api/index.js)，并添加以下代码：

import axios from 'axios'

export default() => {
 return axios.create({
  baseURL: http://localhost:8080,
  headers: {
   'Content-Type': 'application/json'
  }
 })
}

然后在Vue项目的一个组件中，添加以下代码：

import api from '@/api'

export default {
  name: 'HelloWorld',
  data () {
    return {
      message: ''
    }
  },
  created () {
    api().get('/hello')
    .then(response => {
      this.message = response.data
    })
  }
}

这段代码从Spring Boot服务器获取数据，并将数据显示在Vue组件中。

最后，在Vue项目的根目录下执行以下命令：

npm run dev

在执行这个命令后，Vue应用程序会启动并在Web浏览器中打开。

总结

本文主要介绍了如何搭建Vue和Spring Boot的全栈式项目。在搭建项目时，需要注意代理的设置和RESTful服务端点的创建。Vue和Spring Boot的配合使用可以创建适用于多平台(Web，PC，移动设备)的全栈式应用程序。