营销型 手机网站精品网站设计

 

 全局注册代码：

//文件核心作用：导入App.vue,基于App.vue创建结构渲染index.htmlimport Vue from 'vue'
import App from './App.vue'
//编写导入的代码，往代码的顶部编写（规范）
import HmButton from './components/Hm-Button.vue'
Vue.config.productionTip = false//进行全局注册->在所有的组件范围内都能直接使用
//Vue.component(组件名，组件对象)Vue.component('HmButton',HmButton)//Vue实例化，提供render方法->基于App.vue创建结构渲染index.html
new Vue({//render: h => h(App),render:(createElement)=>{//基于App创建元素结构return createElement(App)}
}).$mount('#app')

 Hm-Button.vue

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

Hm-Header.vue

<template><div class="hm-header">我是hm-header<hm-button></hm-button></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>

若想改为局部注册，则，以Hm-Header.vue为例：

运行效果图

<template><div class="hm-header">我是hm-header<hm-button></hm-button></div>
</template><script>
import HmButton from './Hm-Button.vue';
export default {//局部注册components:{HmButton
}
}
</script><style>
.hm-header{height:100px;line-height:100px;text-align:center;font-size:30px;background-color:#8064a2;color:white;}
</style>