import Vue from  'vue'         表示引入了vue这个库并赋值给了Vue;  类似require

new Vue({

         el:"#app",

          template:"<p>Hello Word! {{ word }}</p>"，

          data:{

                   word: 'hello word'

           }

})

组件树：

实现组件注册和引入

全局注册组件：

Vue.component('my-header',{

        template:"<p>this is my header</p>"

})

调用组件:

<my-header></my-header>

局部注册：

注册：

var myHeaderChild = { 

        template:'<p>i am a headerChild</p>'

}

var myHeader = {

       template:"this is my header"，

       components:{

           'my-header-child' : myHeaderChild  

       }

}

data:  //组件赋值,这样做避免了引用赋值

        function(){

           return:{f:1,d:2}

       }

new Vue({

        el:"#app",

        data:{

              word:"hello word"

        }

       components:{     //局部注册组件

            'my-header':    myHeader

        }

})