<template>

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

 </template>

 <script>

 export default {

 }

 </script>

 <style>

  button {

    width: 200px;

    height: 50px;

    background-color: pink;

    border-radius: 20px;

 }

 </style>

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

const hello = {

  // 将来这个 hello插件,被vue.use时,会自动调用内部的install方法，进行一些全局组件的注册

  install: function (Vue) {

    Vue.component('hello', HelloComponent)

  }

}

// 导出

export default hello

<template>

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

    <hello></hello>

  </div>

</template>

<style lang="less">

</style>

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')