Spring Boot Vue Element入门实战 四、主页面开发

本博客属作者原创，未经允许禁止转载，请尊重原创！如有问题请联系QQ509961766

（一）页面布局

页面布局分为3个部分：

• 顶部导航：系统logo，登录信息，退出按钮等
• 左侧菜单：显示系统菜单
• 右侧展示：显示页面主要内容

（二）修改布局文件App.vue

主要是一些样式和布局，注意在IDEA下sass语法会报错，忽略即可，后续有时间再研究。

<template>
  <div id="app">
    <transition name="fade" mode="out-in">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'app',
    components: {}
  }
</script>

<style lang="scss">
  body {
    margin: 0;
    padding: 0;
    font-family: Helvetica Neue, Helvet