定义全局组件

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 router from './router'

//引入子组件对象
import headerVue from './components/header.vue';
import bodyVue from './components/body.vue';
import footerVue from './components/footer.vue';
//声明全局组件
Vue.component("headerVue",headerVue);
Vue.component("bodyVue",bodyVue);
Vue.component("footerVue",footerVue);
Vue.config.productionTip = false

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

 

app.vue引入

<template>
<div>
<header-vue></header-vue>
<body-vue></body-vue>
<footer-vue></footer-vue>
</div>
</template>

<script>

export default{
data(){
return{

}
},
methods:{

}
}

</script>

<style>

</style>