Vue 局部组件和全局组件的使用

<template>
  <div  id="app">
    <!--<img alt="Vue logo" src="./assets/logo.png">-->
    <!--<HelloWorld msg="你妹的是你吗?"/>-->
    <mtmp></mtmp>
    <h1>{{ title}}</h1>
    <users></users><!--第三步：这里直接引入,users 是在注册全局组件时 起的名字-->
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import myTemplate from './components/myTemplate.vue'
import  Users from './components/Users.vue'//引入
export default {
  name: 'app',
    data(){
      return {
        title:'这是我的第一个vue-cli 脚手架项目'
      }
    },
  components: {//此处进行注册局部组件
      "mtmp":myTemplate,
      "users":Users
  }
}
</script>

<style>

</style>

import Vue from 'vue'
import App from './App.vue'
// import Users from './components/Users' //第二步 在这里导入组件

Vue.config.productionTip = false
//全局注册组件  第一步 ：但是一般不会用全局组件，一般用的是局部
// Vue.component('users',Users);//前面的users是给组件起的名字，后面的是组件名称
new Vue({
  render: h => h(App)//单参可以这样写
}).$mount('#app')

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

    </div>
</template>


<script>
    export default {
        name:'users',
        data (){
            return {
                users:["a","b",'c']
            }
        }
    }

</script>


<style scoped>



</style>

 目录结构为：