2.13

今天学vue的组件化开发,组件的局部注册和全局注册

现在写页面就可以像拼图一样,将一个个组件拼起来了,方便快捷了不少.

今日代码

<template>
    <div class="hm-Footer">
      芝士Footer <hm-button>按钮</hm-button>
    </div>
  </template>
  
  <script>
import HmButton from './HmButton.vue'
  export default {
  components: { HmButton },
  
  }
  </script>
  
  <style>
  .hm-Footer{
      height: 100px;
      text-align: center;
      font-size: 30px;
      background-color: #4132c3;
      color: white;
      
  }
  </style>

<template>
  <div class="hm-main">
    芝士main  
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-main{
    height: 400px;
    
    text-align: center;
    font-size: 30px;
    background-color: #a58e28;
    color: white;
    margin: 20px 0;
}
</style>

<template>
  <div class="hm-header">
    芝士header 
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-header{
    height: 100px;

    text-align: center;
    font-size: 10px;
    background-color: #8064a2;
    color: white;
}
</style>

<template>
  <button class="hm-button">通用按钮</button>
</template>

<script>
export default {
    
}
</script>

<style>
    .hm-button{
        height: 50px;
        line-height: 50px;
        padding: 0 20px;
        background-color: yellow;
        border-radius: 5px;
        vertical-align: middle;
    }
</style>

<template>
  <div class="App">
    <HmHeader></HmHeader>
    <HmMain></HmMain>
    <HmFooter></HmFooter>
  </div>
</template>

<script>
import HmHeader from './components/HmHeader.vue';
import HmFooter from './components/HmFooter';
import HmMain from './components/HmMain.vue';
export default {
  components:{
    HmHeader,
    HmMain,
    HmFooter,
  }
}
</script>

<style>
.App{
  width: 600px;
  height: 600px;
  background-color: #87ceeb;
  margin: 0 auto;
  padding: 20px;

}
</style>

import Vue from 'vue'
import App from './App.vue'

//导入需要全局注册的组件
import HmButton from './components/HmButton'

//调用Vue.component 进行全局注册
//Vue.component('组件名',组件对象)
Vue.component('HmButton',HmButton)

new Vue({
  render: h => h(App),
}).$mount('#app')