Spring Boot+Vue前后端分离项目案例

一、构建项目

使用vue-cli创建项目：

然后导入编辑器（我使用的是webstorm），先进行启动下，看能否访问到localhost:8080。

能访问到表示使用vue-cli创建项目正常。

 

二、进行前端代码编写

记得添加修改config下 的index.js文件

 

 

前端页面代码：

Footer.vue

<template>
  <div>
    页面尾部
  </div>
</template>

<script>
    export default {
        name: "footer"
    }
</script>

<style scoped>

</style>

Header.vue

<template>
  <div>
    页面头部
  </div>
</template>

<script>
    export default {
        name: "header"
    }
</script>

<style scoped>

</style>

Index.vue

<template>
  <div>
    <blog-header></blog-header&g