新建vue-cli项目(2)

项目需要的环境都搭建好了，需要搭一套传统的架子
头部左边栏和右边内容部分

image.png

方法有很多，根据自己的喜好
下面是我的方法
首先先配置登录页路由

 routes: [
    {
      path: '/',
      redirect:'/login'
    },
    {
      path:'/login',
      name:'Login',
      component: resolve=> require(['../components/Login'],resolve)
    }
  ]

登录成功后，跳转到首页的路由

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/login'
    },
    {
      path:'/login',
      name:'Login',
      component: resolve=> require(['../components/Login'],resolve)
    }，
    {
      path:'/study',
      component: resolve => require(['../common/common'],resolve),
      children:[
        {
          path:'/',
          name: 'Study',
          component: resolve => require(['../components/study/study'],resolve)
        }
      ]
    },
  ]
})

上面路径 /study下面的common其实就是公用的单页
页面目录结构如下

image.png

左边栏和头部其实没有什么好看的
主要是common看一下

<template>
  <div class="wrapper">
    <Header></Header>
    <Left></Left>
    <router-view class="content"></router-view>
  </div>
</template>

<script>
  import Header from './header'
  import Left from  './Left'
  export default{
    data(){
      return{

      }
    },
    components:{
      Header,
      Left
    }
  }
</script>

<style>
.wrapper{
  position: relative;
  height: 100%;
}
  .content{
    position: absolute;
    left: 178px;
    top: 80px;
    bottom: 0;
    right: 0;
  }
</style>

ok一个最简单的上中下页面就搭建完了