当前位置：首页 > news >正文

Vue3.5 企业级管理系统实战（七）：Sidebar组件开发 1

news 来源：原创 2025/5/15 13:00:41

现在开始，我们要进行 Sidebar 组件的开发，篇幅和时间原因，本篇先探讨 el-menu 的配置。

1 菜单样式设置

在 src/style/variables.module.scss 中，我们设置菜单样式相关的变量，这些变量将用于后续组件的样式配置。

//src/style/variables.module.scss
$sideBarWidth: 210px;
$navBarHeight: 50px;
$tagsViewHeight: 34px;

// 导航颜色
$menuText: #bfcbd9;
// 导航激活的颜色
$menuActiveText: #409eff;
// 菜单背景色
$menuBg: #304156;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  menuBg: $menuBg;
}

:export 是 CSS 模块中用于在 SCSS 文件导出变量供 JavaScript 使用的规则。在 SCSS 文件里定义变量后，通过 :export 规则块，将变量映射成适合 JavaScript 访问的名称。在支持 CSS 模块的构建工具（如 Vite、Webpack）的 JavaScript 代码中，导入该 SCSS 文件，就能使用这些导出的变量。需注意，导出变量名要遵循 JavaScript 命名规范，且依赖构建工具对 CSS 模块的支持，变量值在构建时确定，运行时无法直接修改。

2 Sidebar 组件开发

2.1. 创建组件文件

在 src/layout/components/Sidebar 目录下创建 index.vue 文件。由于之前自动引入配置的路径要求，组件需放在 components 文件夹下，也可按需修改自动引入配置。

//src/layout/components/Sidebar/index.vue
<template>
  <el-menu
    router
    :default-active="defaultActive"
    :background-color="variables.menuBg"
    :text-color="variables.menuText"
    :active-text-color="variables.menuActiveText"
  >
    <el-menu-item index="/dashboard">
      <el-icon><setting /></el-icon>
      <template #title>Navigator</template>
    </el-menu-item>
  </el-menu>
</template>

<script lang="ts" setup>
import variables from "@/style/variables.module.scss";

const route = useRoute();
const defaultActive = computed(() => {
  return route.path;
});
</script>
<style scoped></style>

2.2 解决 TypeScript 类型导入问题

在 script 中直接导入 variables.module.scss 时，TypeScript 会报错，原因是它默认只识别 .ts、.js 等文件类型，缺少对 .scss 文件的类型定义。为解决该问题，我们在 src/style 下新建 variables.module.scss.d.ts 文件，为 variables.module.scss 提供类型定义。

//src/style/variables.module.scss.d.ts
interface IVariables {
  menuText: string;
  menuActiveText: string;
  menuBg: string;
}

export const variables: IVariables;
export default variables;

通过创建该文件，TypeScript 能够识别 variables.module.scss 模块的类型，从而可以正常导入。

3 页面引入 Sidebar 组件

在 layout/index.vue 中引入 Sidebar 组件。

//src/layout/indev.vue
<template>
  <div class="app-wrapper">
    <div class="sidebar-container">
      <sidebar></sidebar>
    </div>
    <div class="main-container">
      <div class="header">
        <div class="navbar">导航条1</div>
        <div class="tags-view">导航条2</div>
      </div>
      <div class="app-main">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.app-wrapper {
  @apply flex w-full h-full;
  .sidebar-container {
    @apply bg-red w-[var(--sidebar-width)];
  }
  .main-container {
    @apply flex flex-col flex-1;
  }
  .header {
    @apply h-84px;
    .navbar {
      @apply h-[var(--navbar-height)] bg-yellow;
    }
    .tags-view {
      @apply h-[var(--tagsview-height)] bg-blue;
    }
  }
  .app-main {
    @apply bg-cyan;
    min-height: calc(100vh - var(--tagsview-height) - var(--navbar-height));
  }
}
</style>

完成上述所有步骤后，在项目的根目录下运行 npm run dev 命令即可启动开发服务器，打开浏览器访问相应的地址，就可以查看页面的实际效果，检查 Sidebar 组件是否按照预期显示和工作。