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

 

2.hello.vue代码如下

 1 <template>
 2 <button>这是hello按钮</button>
 3 </template>
 4 
 5 <script>
 6 export default {
 7 
 8 }
 9 </script>
10 
11 <style>
12  button {
13    width: 200px;
14    height: 50px;
15    background-color: pink;
16    border-radius: 20px;
17 }
18 </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.一个简单的vue组件就写好了，看一下运行效果

版权声明：本文为97Coding原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/97Coding/p/12045722.html