灏天阁

vue3.2/Vite/Ts23: layout 组件的静态的搭建

· Yin灏

搭建 layout 组件

新建 layout 静态组件：

src
 |-- layout
       |-- index.vue
       |-- logo # logo 组件封装
            |-- index.vue
  • src / layout / index.vue
<template>
  <div class="layout_container">
    <!-- 左侧菜单 -->
    <div class="layout_slider">
      <Logo></Logo>
    </div>
    <!-- 顶部导航 -->
    <div class="layout_tabbar"></div>
    <!-- 内容展示区域 -->
    <div class="layout_main"></div>
  </div>
</template>
<script setup lang="ts">
  import Logo from "./logo/index.vue";
</script>
  • src / layout / logo / index.vue
<template>
  <div v-if="logoHidden">
    <img :src="logo" />
    <p>{{ title }}</p>
  </div>
</template>
<script setup lang="ts">
  import { title, logo, logoHidden } from "@/setting";
</script>

公共元素配置

  • 新建 src / setting.ts
export default {
  title: "xxx运营平台", // 项目标题
  logo: "/public/logo.png",
  logoHidden: true, // 是否隐藏 logo
};

定义 layout 元素尺寸的全局变量

  • 定义全局 scss 变量，以便所有组件都可以使用
// src / styles / variable.scss

// 左侧的菜单的宽度
$base-menu-width: 260px;
// 左侧菜单的背景颜色
$base-menu-background: #001529;
// 顶部导航的高度
$base-tabbar-height: 50px;
$base-menu-logo-height: 50px;

配置 layout 路由

  • src / router / routes.ts
//...
export const constantRoute = [
  //...
  // 将 home 组件改为 layout 组件
  {
    path: "/",
    component: () => import("@/layout/index.vue"),
    name: "layout",
  },
  //...
];
//...

- Book Lists -