vuedemo1-2

编写独立的侧边栏导航组件

　　上节学习了inconFont的使用，可以在项目中加入漂亮的icon图标了。这节课我们要快速撸一个侧边栏组件出来。组件的作用就是在可以复用，想在那个页面使用都可以，并且像写html标签一样简单。

　建立leftNav.vue文件：

　　我们在src/components目录下，先新建一个common和page文件夹。

• common文件夹用来放共用组件，下面写的leftNav.vue组件就放到这里。
• page文件夹用来放我们的页面模板组件，页面的模板文件放到这里。

　　在common文件夹下，新建leftNav.vue文件。

　　开始动手写代码：

　　建立好文件后，我们先给components来个基本组件结构，你可以复制粘贴也可以手写。

<style>
    .left-nav{
       color:#fff;
       font-size:10px;
       height:100%;
       background-color: #1D8ce0;
       float:left;
       width:5%;
    }
    .iconfont{
       font-size:24px;
    }
    .left-nav ul{
        padding:0px;
        margin: 0px;
    }
    .left-nav li{
        list-style: none;
        text-align: center;
        border-bottom:1px solid #20a0ff;
        padding:10px;
    }
</style>

　　编写完CSS样式，这个组件算是大体写好了，以后根据需求我们会在组件里添加<route-link>标签。但是现在还没有这个需求，所以暂时不添加。

　把leftNav组件放到模板中

　　先用import在App.vue中引入leftNav组件。

import leftNav from '@/components/common/leftNav'

　　引入后在vue的构造器里添加components属性，并放入我们的leftNav组件。

export default {
  name: 'app',
  components:{
    leftNav
  }
}

　　这样组件就算在也页面引入成功了，接下来我们就可以在<template>区域里愉快的使用它（<leftNav></leftNav>）。

<template>
  <div id="app">
    <!--左侧导航-->
    
        <leftNav></leftNav>
    
    <!--操作区域-->
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>
 
<script>
import leftNav from '@/components/common/leftNav'
export default {
  name: 'app',
  components:{
    leftNav
  }
}
</script>
 
<style>
#app {
  font-family: 'Microsoft YaHei','Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
   height:100%;
}
 
.main{
  float:left;
  width:95%; 
  background-color: #EFF2F7;
  height:100%;
  overflow: auto;
 
}
</style>

 

转载于:https://www.cnblogs.com/xiaofandegeng/p/9067553.html