组件化开发：一个页面可以拆分成一个个组件；每个组件都有自己独立的结构、样式、行为

组件分类：普通组件、根组件

其中根组件包裹着所有普通小组件

• 普通组件的注册使用；有两种注册方式
  • 局部注册
  • 全局注册

局部注册

目标：

  根组件（App.vue）：

<template><div class="App"><!-- 头部组件 --><!-- 主体组件 --><!-- 底部组件 --></div>
</template><script>
export default {}
</script><style>
.App{width:600px;height:700px;background-color: #87ceeb;margin: 0 auto;padding:20px;
}
</style>

• 创建组件 -> 往components里建

HmHeader.vue

<template><div class="hm-header">我是hm-header</div>
</template><script>
export default {}
</script><style>.hm-header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color: white;}
</style>

• 在使用的组件内部导入、注册、使用

导入

注册

使用

完整代码：

App.vue

<template><div class="App"><!-- 当成html标签使用：<组件名></组件名> --><!-- 头部组件 --><HmHeader></HmHeader><!-- 主体组件 --><HmMain></HmMain><!-- 底部组件 --><HmFooter></HmFooter></div>
</template><script>
// import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {//局部注册components:{// 组件名：组件对象HmHeader: HmHeader,HmMain,HmFooter}
}
</script><style>
.App{width:600px;height:700px;background-color: #87ceeb;margin: 0 auto;padding:20px;
}
</style>

components -> HmHeader.vue

<template><div class="hm-header">我是hm-header</div>
</template><script>
export default {}
</script><style>.hm-header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color: white;}
</style>

components -> HmMain.vue

<template><div class="hm-main">我是hm-main</div></template><script>export default {}</script><style>.hm-main {height: 500px;line-height: 500px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin:20px 0;}</style>

components -> HmFooter.vue

<template><div class="hm-footer">我是hm-footer</div></template><script>export default {}</script><style>.hm-footer {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #4f81bd;color: white;}</style>

全局注册

先来看一下局部注册按钮

只能在注册的组件内使用

目标：

1.创建组件

 2.导入、注册、使用

再来看一下全局注册通用按钮

目标：

在所有的组件范围内都能直接使用

• 创建组件 -> 往components里建

• 导入、注册 （在main.js里进行全局注册）

• 使用 <组件名></组件名>

完整代码：

App.vue

<template><div class="App"><!-- 当成html标签使用：<组件名></组件名> --><!-- 头部组件 --><HmHeader></HmHeader><!-- 主体组件 --><HmMain></HmMain><!-- 底部组件 --><HmFooter></HmFooter></div>
</template><script>
// import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader.vue'
import HmMain from './components/HmMain.vue'
import HmFooter from './components/HmFooter.vue'
export default {//局部注册components:{// 组件名：组件对象HmHeader: HmHeader,HmMain,HmFooter}
}
</script><style>
.App{width:600px;height:700px;background-color: #87ceeb;margin: 0 auto;padding:20px;
}
</style>

main.js

// 入口文件；第一个执行的文件；基于App.vue创建结构渲染index.html
// 导入Vue
import Vue from 'vue'
// 导入App.vue
import App from './App.vue'import HmButton from './components/HmButton'//提示当前处于什么环境（生产环境 / 开发环境)
Vue.config.productionTip = true //开发环境// Vue.component('组件名'，组件对象)
Vue.component('HmButton',HmButton)new Vue({render: h => h(App)
}).$mount('#app')

components -> HmButton.vue

<template><button class="hm-button">通用按钮</button>
</template><script>
export default {}
</script><style>.hm-button {height:50px;line-height:50px;padding:0 20px;background-color: #3bae56;border-radius:5px;color:white;border:none;/* 垂直对齐 */vertical-align: middle;cursor:pointer;}
</style>

components -> HmHeader.vue

<template><div class="hm-header">我是hm-header<HmButton></HmButton></div>
</template><script>export default {}
</script><style>.hm-header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color: white;}
</style>

components -> HmMain.vue

<template><div class="hm-main">我是hm-main<HmButton></HmButton></div></template><script>export default {}</script><style>.hm-main {height: 450px;line-height: 500px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin:20px 0;}</style>

components -> HmFooter.vue

<template><div class="hm-footer">我是hm-footer<HmButton></HmButton></div></template><script>export default {}</script><style>.hm-footer {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #4f81bd;color: white;}</style>