主要参考

Vue.js教程-Vue项目的目录结构和.vue文件的构成
这哥们写的是真细致，基本我想要了解的vue大题框架和细致介绍都有了，附上我的某页面实现的源码，结合这篇文章，基本页面大组件的理解就大差不差了。

目录文件：

view/home.vue 源码

<template>
<!--  html区域 template里面只能有一个div-->
  <div class="about" style="min-height:100%" >
<!--  这里用的是 element-ui官网 => Layout Container => sample
      具体布局参考element-ui官方文档
      基本所有界面 template div 不变把以下组件进行修改就行
      -->
    <el-container style="min-height:100%;" >

      <el-aside :width="sideWidth+'px'"  style="background-color: rgb(238, 241, 246);overflow-y: scroll" >
<!--    :collapse-transition="false" 关闭标签动画效果，解决导航栏收缩卡顿问题-->
        <el-menu :default-openeds="['1', '3']"
            style="min-height:100%;"
            background-color="rgb(48,65,86)"
            text-color="#fff"
            active-text-color="#ffdo4b"
            :collapse="isCollapsed"
            :collapse-transition="false">
<!--          添加目录头-->
          <div style="height:60px;line-height: 60px;text-align: center">
            <img src="../assets/logo.png" style="width:20px;position: relative; top:5px;margin-left: 5px">
            <b style="color:white" v-show="LogoTextShow">运动后台管理</b>
          </div>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">Navigator One</span>
            </template>
            <el-menu-item-group>
              <template slot="title">Group 1</template>
              <el-menu-item index="1-1">Option 1</el-menu-item>
              <el-menu-item index="1-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="1-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">Option4</template>
              <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">Navigator Two</span>
            </template>
            <el-menu-item-group>
              <template slot="title">Group 1</template>
              <el-menu-item index="2-1">Option 1</el-menu-item>
              <el-menu-item index="2-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="2-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">Option 4</template>
              <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3" >
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">Navigator Three</span>
            </template>
            <el-menu-item-group>
              <template slot="title">Group 1</template>
              <el-menu-item index="3-1">Option 1</el-menu-item>
              <el-menu-item index="3-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="3-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">Option 4</template>
              <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="font-size: 12px;line-height:60px;border-bottom: 1px solid #ccc;display:flex ">
          <div style="flex:1;font-size: 25px">
            <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
          </div>
          <el-dropdown style="cursor:pointer">
            <!--        <i class="el-icon-setting" style="margin-right: 15px"></i>-->
            <span>Tom</span> <i class="el-icon-arrow-down" style="margin-left:5px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>View</el-dropdown-item>
              <el-dropdown-item>Add</el-dropdown-item>
              <el-dropdown-item>Delete</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

        </el-header>

        <el-main>
          <!--      增删改查 <i>的class 里使用不同风格的图标 type element里封装好的样式 -->
          <div style="padding: 10px 0;float: left">
            <el-button type="primary">insert
              <i class="el-icon-circle-plus-outline"></i>
            </el-button>
            <el-button type="danger">Delete
              <i class="el-icon-remove-outline"></i>
            </el-button>
            <el-button type="primary">input
              <i class="el-icon-download"></i>
            </el-button>
            <el-button type="primary">output
              <i class="el-icon-upload2"></i>
            </el-button>
          </div>
          <!--      搜索框-->
          <div  style="padding: 10px 0; float: right">
            <el-input  style="width:150px;float: left"></el-input>
            <el-button type="primary"  style="float: left">Primary</el-button>
          </div>

          <!--      表格主题-->
          <el-table :data="tableData">
<!--            table li的prop和数据表的表头 相同-->
            <el-table-column prop="s_Name" label="Name" width="140"></el-table-column>
            <el-table-column prop="s_Result" label="Result" width="120"></el-table-column>
            <el-table-column prop="s_Time" label="Time"></el-table-column>
            <el-table-column >
              <el-button type="success">editor<i class="el-icon-edit-outline"></i></el-button>
              <el-button type="danger">delete<i class="el-icon-remove-outline"></i></el-button>
            </el-table-column>
          </el-table>
          <!--      分页效果栏 Pagination-->
          <div align="right" style="padding: 15px 0">
            <div class="block">
<!--              @尺寸变化和当前页面 点击触发函数 pageNum pageSize total 与fetch查询到的数据库数据进行绑定-->
              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-sizes="[2, 5, 10, 15]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
              </el-pagination>
            </div>
          </div>

        </el-main>

      </el-container>

    </el-container>

<!--  直接写上子组件就可以在 页面中显示HelloWorld组件内容-->
<!--<HelloWord></HelloWord>-->
  </div>
</template>
<script>

/**
 * import HelloWord from '../components/tabbar'
 * 我这里没有用，不过以上语句可以引入通过用控件
 * 然后在 export default 中的components写上引入空间*/
export default {
  name: 'HomeView',

  data() {//数据写在return里返回
    // const item = {
    //   date: '2016-05-02',
    //   name: 'Tom',
    //   address: 'No. 189, Grove St, Los Angeles'
    // };
    return {
      tableData:[],//列表数据
      total:0,//总计
      pageNum:1,
      pageSize:2,
      // tableData: Array(10).fill(item),
      collapseBtnClass:'el-icon-s-fold',//折叠图标的类型根据点击事件 collapse发生改变
      isCollapsed:false, //false展开true折叠
      sideWidth:200,//侧导航栏宽度
      LogoTextShow:true//文本是否显示
    }
  },
  // components:{ 引入子组件 所以当前home是父组件，helloworld是子组件
  //   HelloWord
  // },

  created(){
  //  请求分页查询数据
    this.load()
  },
  methods:{//写一些界面常见方法，用于请求和传递数据
    collapse(){ //点击收缩按钮触发 菜单栏收缩
      this.isCollapsed=!this.isCollapsed;
      if(this.isCollapsed){
        this.sideWidth=64
        this.collapseBtnClass='el-icon-s-unfold'
        this.LogoTextShow=false
      }else{
        this.sideWidth=200
        this.collapseBtnClass='el-icon-s-fold'
        this.LogoTextShow=true

      }
    },
    load(){// 加载获取动态数据
      //fetch()请求，得到response对象，获取服务器json数据
      /**使用ES6的箭头函数
       * fetch()
       *     .then(response=>response.json)
       *     .catch(response=>console.log(response))
       * 相当于
       * fetch()
       *     .then(
       *        function(response){
       *          return response.json;
       *        })
       *     .catch(
       *        function(response){
       *          console.log(response)
       *        }
       *     )
       *
       * */
      fetch("http://localhost:8080/sportevent/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize)
          .then(res => res.json())//response.json(),异步操作，取出所有内容，转json
          .then(res =>{console.log(res),//输出，并处理json文件
            this.tableData=res.data,
            this.total=res.total})

    },
    handleSizeChange(pageSize){
      console.log(pageSize)
      this.pageSize=pageSize 
      this.load()

    },
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum=pageNum
      this.load()

    },

  }

}
</script>

【JS】fetch() 用法
界面效果大致如下

未解决问题

1.侧导航栏滚动条隐藏，但可滑动没实现
2.页面变小的时候组件布局凌乱