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>

App.vue

 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')

main.js

 <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>

User.vue

目录结构为：