布局组件开发

• 整体布局使用左侧边栏 + 头部 + 顶部标签栏 + 中部页面内容
• 在 src 目录下新建 views 目录用于存放页面文件
• 在 views 目录下新建 layout 目录用于存放布局文件
• 在 layout 目录下新建 layout.vue 用于存放页面布局
• 在 layout.vue 中添加页面布局

<!-- 页面布局 -->
<template>
  <!-- 页面整体容器 -->
  <div class="layout-wrapper">
    <!-- 左侧边栏容器 -->
    <div class="sidebar-container">
      <!-- 左侧边栏 -->
      <sidebar></sidebar>
    </div>
    <!-- 主体容器 -->
    <div class="main-container">
      <!-- 页面头部 -->
      <navbar></navbar>
      <!-- 面包屑导航 -->
      <tags></tags>
      <!-- 页面内容 -->
      <page-container></page-container>
    </div>
  </div>
</template>

<script>
// 引入组件
import {Sidebar, Navbar, Tags, PageContainer} from './components'

export default {
  name: 'layout',
  // 注册组件
  components: {
    Sidebar, // 左侧边栏
    Navbar, // 页面头部
    Tags, // 面包屑导航
    PageContainer // 页面内容
  }
}
</script>

<style scoped lang="stylus">
  // 页面整体布局样式
  .layout-wrapper
    position relative
    background #304151
    height 100%
    overflow-y auto // Y轴方向内容超出自动增加滚动条
  // 左侧边栏容器样式
  .sidebar
    position fixed
    top 0
    bottom 0
    left 0
    background #304151
    color #bfcbd1
    width 180px
  // 右侧区域样式
  .main-container
    height 100%
    overflow-y auto
    margin-left 180px
    background #f0f2f5
</style>

• 在 layout 目录下新建 components 目录用于存放组件文件
• 在 components 目录下新建 ***.vue 组件文件

<!-- 页面头部 -->
<template>
<div class="navbar">navbar</div>
</template>

<script>
export default {
  name: 'Navbar'
}
</script>

<style scoped lang="stylus">
  // 顶部标签栏样式
  .navbar
    height 50px
    line-height 50px
    background-color #fff
    boder-bottom 1px solid #E6E6E6  // 底部线条
</style>

<!-- 页面内容 -->
<template>
<div class="page-container">
  <div class="page-wrapper">
    <div class="page-content">
    <p>page content</p>
    <p>page content</p>
    <p>page content</p>
    <el-button type="primary">test</el-button>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'PageContainer'
}
</script>

<style scoped lang="stylus">
  // 页面容器
  .page-container
    position relative
    height calc(100% - 84px) // 减去上部高度
    background #f0f2f5
    margin 0 12px
    padding-top 12px
    .page-wrapper
      position absolute
      width 100%
      height calc(100% - 24px)
      .page-content
        padding 12px
        background #fff
        margin-bottom 12px
</style>

<!-- 左侧边栏 -->
<template>
<div class="sidebar">sidebar</div>
</template>

<script>
export default {
  name: 'Sidebar'
}
</script>

<style scoped>

</style>

<!-- 面包屑导航 -->
<template>
<div class="page-tags-container">
  <div class="tag-wrapper">
    <div>tag list</div>
  </div></div>
</template>

<script>
export default {
  name: 'Tags'
}
</script>

<style scoped lang="stylus">
  // 面包屑导航样式
  .page-tags-container
    position relative
    z-index 9
    color #495060
    height 34px
    line-height 34px
    background #fff
    padding 3px 1px 1px 1px  // 边距 上 右 下 左
    font-size 12px
    border-bottom 1px solid #d8dce5 // 下边框
    box-shadow 0 1px 3px 0 rgba(0,0,0,.12), 0 0 3px 0 rgba(0,0,0,.04) // 阴影
</style>

• 在 components 目录下新建 index.js 用于新建组的导出

export {default as Sidebar} from './sidebar'
export {default as Navbar} from './Navbar'
export {default as Tags} from './Tags'
export {default as PageContainer} from './PageContainer'

• 在 layout.vue 中通过 components -> index.js 引入新建好的组件，并在 script 中注册组件

<!-- 页面布局 -->
<template>
  <!-- 页面整体容器 -->
  <div class="layout-wrapper">
    <!-- 左侧边栏容器 -->
    <div class="sidebar-container">
      <!-- 左侧边栏 -->
      <sidebar></sidebar>
    </div>
    <!-- 主体容器 -->
    <div class="main-container">
      <!-- 页面头部 -->
      <navbar></navbar>
      <!-- 面包屑导航 -->
      <tags></tags>
      <!-- 页面内容 -->
      <page-container></page-container>
    </div>
  </div>
</template>

<script>
// 引入组件
import {Sidebar, Navbar, Tags, PageContainer} from './components'

export default {
  name: 'layout',
  // 注册组件
  components: {
    Sidebar, // 左侧边栏
    Navbar, // 页面头部
    Tags, // 面包屑导航
    PageContainer // 页面内容
  }
}
</script>

<style scoped lang="stylus">
  // 页面整体布局样式
  .layout-wrapper
    position relative
    background #304151
    height 100%
    overflow-y auto // Y轴方向内容超出自动增加滚动条
  // 左侧边栏容器样式
  .sidebar
    position fixed
    top 0
    bottom 0
    left 0
    background #304151
    color #bfcbd1
    width 180px
  // 右侧区域样式
  .main-container
    height 100%
    overflow-y auto
    margin-left 180px
    background #f0f2f5
</style>

• 在 router -> index.js 中修改页面路由， 在路由中添加新建的页面路由并删除模板中自带的Helloworld页面

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '../views/layout/layout' // 布局

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Layout', // 布局名称
      component: Layout // 布局组件
    }
  ]
})

• 删除模板中自带的 src -> components -> helloworld.vue 文件，并删除 app.vue 中的 img 标签
  与 #app 中的 样式文件
• npm run dev 启动项目可以看到组件添加成功

项目仓库

Gitee