怎么定义一个自己的vue组件

1.在src文件夹中创建一个hello文件夹，然后创建hello.js和hello.vue

2.hello.vue代码如下

<template>
<button>这是hello按钮</button>
</template>

<script>
export default {

}
</script>

<style>
 button {
    200px;
   height: 50px;
   background-color: pink;
   border-radius: 20px;
}
</style>

3.hello.js代码如下

// 导入我们刚刚写的hello.vue文件
import HelloComponent from './hello.vue'

const hello = {
  // 将来这个 hello插件,被vue.use时,会自动调用内部的install方法，进行一些全局组件的注册
  install: function (Vue) {
    Vue.component('hello', HelloComponent)
  }
}
// 导出
export default hello

4.在App.vue中直接使用

<template>
  <div id="app">
    //hello组件
    <hello></hello>
  </div>
</template>

<style lang="less">
</style>

 5.在main.js文件中引入，代码如下

import Vue from 'vue'
import App from './App.vue'
import store from './store'
// 引入
import hello from './hello/hello.js'

Vue.config.productionTip = false

// 进行一些全局组件的注册，以及一些其他的全局初始化
Vue.use(hello)

new Vue({
  render: h => h(App),
  // 挂载vuex
  store
}).$mount('#app')

5.一个简单的vue组件就写好了，看一下运行效果