vue-cli项目实操（二）

接上一篇  vue-cli项目实操（一）

1、新建一个组件Navbar.vue,内容如下:

<template>  
  <div class="navbar navbar-inverse">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href=""><img id="logo" src="https://bootstrap-themes.github.io/application/assets/img/brand-white.png" alt=""></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active" v-for="(item,key) in items"><a :href="item">{{ key }}</a></li>
      </ul> 
    </div>
  </div>
</template>  

<script>
  export default {
    name: 'Navbar',
    data () {
      return {
        items: {
          dsf: 'dsfdsf',
          fg: 'gfhgf',
          gfh: 'dsfdsf'
        }
      }
    }
  }
</script>

<style lang="scss">
  #logo{
    width:85px
  }
  .navbar{
    border-radius:0;
  }
  .navbar-collapse{
      border-top:0;
      -webkit-box-shadow:none;
      box-shadow:none;
  }
  .navbar-inverse{
    background:#3097D1;
    border-color: #3097D1;
  }
  .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a{
    color:#9d9d9d;
  }
  .navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{
    
    background-color: #3097D1;
  }
  .navbar-inverse .navbar-toggle {
    border-color: #eee;
  }
  .navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
    background-color: #3097D1;
  }
</style>

2、index.vue内容修改为：

<template>  
  <nav-bar></nav-bar>
</template>

<script>
  import Navbar from '@/components/Navbar'
  export default {
    name: 'Index',
    data () {
      return {
        msg: 'this is index'
      }
    },
    components: {
      'nav-bar': Navbar
    }
  }
</script>

<style lang="scss">
 
</style>

3、app.vue内容修改为：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

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

<style>
#app {
    
}
</style>

效果如图所示：