app.vue

<template>
  <div id="app">
    <app-header></app-header>
    <users></users>
    <app-footer></app-footer>
  </div>
</template>

<script>
//局部注册组件
import Users from './components/Users'
import Header from './components/Header'
import Footer from './components/Footer'

export default {
  name: 'app',
  data(){
    return{
      title:"这是第一个Vue脚手架"
    }
  },
  components:{
    //也可以省略掉key
    //Users
    "users":Users,
    //不能直接使用header作为Key因为会和组件里面的原生代码冲突
    "app-header":Header,
    "app-footer":Footer
  }
}
</script>

<style scoped>
h1{
  color: purple;
}
</style>

components/Header.vue

<template>
    <header>
        <h1>{{title}}</h1>
    </header>
</template>

<script>
export default {
  name: 'app-header',
  props: {
    msg: String
  },
  data(){
      return{
          title:"Vue.js Demo"
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
header{
    background: lightgreen;
    padding: 10px;
}
h1{
    color: #222;
    text-align: center;
}
</style>

component/Users.vue

<template>
  <div class="users">
    <h1>Hello Users</h1>
    <ul>
        <li v-for="(user,index) in users" :key="index"
            v-on:click="user.show=!user.show">
            <h2>{{user.name}}</h2>
            <h2 v-show="user.show">{{user.position}}</h2>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'users',
  data(){
      return{
          users:[
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
              {name:"Henry",position:"Web开发",show:false},
          ]
      }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .users{
        width: 100%;
        max-width: 1200px;
        margin: 40px auto;
        padding: 0 20px;
        box-sizing: border-box;
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        list-style-type: none;
        padding: 0;
    }
    li{
        flex-grow: 1;
        flex-basis: 200px;
        text-align: center;
        padding: 30px;
        border: 1px solid #222;
        margin: 10px;
    }
</style>

components/Footer.vue

<template>
    <footer>
        <p>{{copyright}}</p>
    </footer>
</template>

<script>
export default {
  name: 'app-footer',
  props: {
    msg: String
  },
  data(){
      return{
          copyright:"Copyright 2019 Vue Demo"
      }
  }
}
</script>

<style scoped>
footer{
    background: #222;
    padding: 6px;
}
p{
    color: lightgreen;
    text-align: center;
}
</style>