vue2前端封装头部公共组件

在Vue2前端中，封装一个头部公共组件是很常见的做法，可以提高代码复用性和模块化。通常，头部公共组件会包含如logo、导航菜单、用户信息等固定的元素。下面是一个简单的步骤说明：

1. 创建文件夹结构：首先，创建一个名为`components`的新文件夹，用于存放自定义组件。在这个文件夹下创建一个子文件夹，例如`Header`。

2. 创建头部组件：在`Header`文件夹里新建一个名为`Header.vue`的文件，内容如下：

<template>
  <header class="header">
    <div class="logo">Logo</div>
    <nav class="navbar">
      <!-- 导航链接列表 -->
      <router-link v-for="(item, index) in menus" :key="index" :to="{ path: item.path }">{{ item.name }}</router-link>
    </nav>
    <div class="user-info">
      <!-- 用户信息区域，如果有登录状态显示用户名或其他个性化信息 -->
      {{ userInfo || '未登录' }}
    </div>
  </header>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      menus: [], // 根据需求从服务端或配置获取菜单数据
      userInfo: null, // 存储用户的登录信息，实际应用中应从 vuex 或者 localStorage 获取
    };
  },
  computed: { // 可能需要计算属性处理动态内容
    logoUrl() {
      // 返回logo图片地址
      // 这部分可以根据实际情况替换，比如从API获取
      return require('@/assets/logo.png');
    }
  },
};
</script>

3. 使用组件：在需要使用头部组件的地方，通过`import`导入并作为局部组件注册或直接插入到布局模板中：

<template>
  <div id="app">
    <Header />
    <router-view></router-view>
  </div>
</template>

<script>
import Header from '@/components/Header.vue';

export default {
  components: {
    Header,
  },
};
</script>