在VUE里 做一个组件.

        在做前端页面时，有时候每个页面都有相同的内容(类似于页面的头部)，代码会重复，在每个页面都会有一模一样的重复代码，在代码多的情况下显得繁琐也不美观，而且不利于管理。

        所以就可以把相同的代码封装在一个组件里，来进行调用。

        首先在vue文件里创建一个文件夹，我起名为components，在里面创建一个后缀名为vue的文件。

        我这里将文件名设置为如图He.vue

         在页面里写好需要的代码(这里简单写了俩个按钮，可以根据需要自行设计).

<template>
  <div>
    <el-row>
      <el-col :span="10"><p></p></el-col>
      <el-col :span="10">
        <el-link type="danger" class="lihe" disabled
          >这是一个自定义组件</el-link
        >
      </el-col>
      <el-col :span="4">
        <el-button type="primary" icon="el-icon-s-home" round>首页</el-button>
        <el-button type="primary" icon="el-icon-caret-left" round>返回</el-button>
      </el-col>
    </el-row>
    <hr class="hl" />
  </div>
</template>
<script>
export default {
  name: "He",
  data() {

  },
  setup() {
  },
};
</script>
<style >
.lihe {
  background-color: bisque;
  height: 30px;
}
.hl {
  background-color: rgba(33, 64, 119, 1);
  height: 10px;
  margin-top: 5px;
  margin-left: 60px;
  margin-right: 60px;
}
</style>

         然后关键来了在需要的页面js里导入这个封装的组件.

import He from "@/components/He.vue";

        然后写入注册代码.

components: {
    He,
  },

 

        html里直接用组件的文件名来声明.

<div>
    <He />
</div>

        完整代码.

<template>
  <div>
    <He />
  </div>
</template>

<script>
import He from "@/components/He.vue";
export default {
  components: {
    He,
  },
  data() {
    return {};
  },

  mounted() {},
};
</script>

<style>
</style>

        配置这个页面路径路由(我起名为boke).

         如图头部(简单的范例):

         如果在需要的页面导入这个头部只需要3行代码.

//1.html中  <div>  <组件文件名  />   </div>
//2.js里面  import  + 组件文件名 + from "@/上层目录/组件文件名.vue";
//3.js里面  export default {components: {组件文件名,},}

        可以自行根据需要创造各种个性化的组件。