vue注册组件

1.建立一个webpack-simple项目

2.在src文件夹下新建components文件夹以存放组件

3.在此文件夹下加入第一个组件HButton.vue

<template>
  <div>
    <el-button-group>
      <el-button type="primary" class="el-icon-add">新增</el-button>
      <el-button type="primary" class="el-icon-delete">删除</el-button>
      <el-button type="primary" class="el-icon-edit">修改</el-button>
    </el-button-group>
    <el-button-group>
      <el-button type="primary" class="el-icon-search">查找面板</el-button>
      <el-button type="primary" class="el-icon-refresh">刷新</el-button>
    </el-button-group>
  </div>
</template>

 <script>
export default {
  name: "HButton"
};
</script>

4. 在需要引入组件的vue文件下引入代码：

<script>
import HButton from "./components/HButton";
export default {
  components: {
    HButton
  },
};
</script>

5.在此文件夹的template下即可使用

<HButton></HButton>

 6.效果如图