vue局部注册组件的使用

1.Users.vue:

<template>
  <div class="users">
     <ul>
	   <li v-for="user in users">
	      {{user}}
	   </li>
	 </ul>
  </div>
</template>

<script>
export default {
  name: 'users',
  data () {
    return {
      users: ["mischen","luke","jack"]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

2.main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from './components/Users'

Vue.config.productionTip = false

//全局注册组件
//Vue.component("users",Users);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

3.App.vue:

<template>
  <div id="app">
     <h1>{{title}}</h1>
	 <users></users>
  </div>
</template>

<script>

//局部注册组件
import Users from './components/Users'

export default {
  name: 'App',
  data(){
     return {
	    title:"this is my first vue.js dffgb脚手架！"
	 }
  },
  components:{
     Users
  }
}
</script>

<style>

</style>