App.vue:
App.vue 是模板根组建
模板
<template>
<div id="app">
<h2>{{msg}}</h2>
3、在模板中使用
<v-home></v-home>
<router-view/>
</div>
</template>

步骤:
1、引入组件
2、注册组件
3、在模板中使用

<script>
import Home from './components/Home.vue';//1、引入组件
export default {
name: 'App',
data (){
return{
msg:'你好！'
}
},
methods:{//用于放置自定义方法

},
components:{
  'v-home':Home,//2、注册组件
}

}
</script>

<style>

app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
</style>

Home.vue:


<template>

<div>
<v-header></v-header>
<h2>这是一个首页组件</h2>
<button @click="run()">执行run()方法</button>
</div>
</template>

<script>
import Header from './Header.vue';
export default {
name: "home",
data(){
return {
msg:'我是一个首页'
}
},
methods:{
run(){
alert(this.msg);
}
},
components:{
'v-header':Header,
}
}
</script>

<style scoped lang="scss">
h2{
color:red;
}
</style>

Header.vue:
<template>
<div>
<h1>{{msg}}</h1>
</div>
</template>

<script>
export default {
name: "header",
data(){
return {
msg:'这个是头部组件'
}
}
}
</script>

<style scoped>
h1{
background: black;
color:white;
}
</style>

image.png image.png