三、后台管理系统页面布局基本结构

codeMob_ZMZ

已于 2022-10-27 14:30:58 修改

阅读量2k

点赞数

分类专栏： vue3 文章标签： css3 前端 css

于 2022-10-27 14:23:44 首次发布

本文链接：https://blog.csdn.net/qq_43683753/article/details/127550771

版权

vue3 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

前言

项目创建及结构梳理完毕后，开始进行后台管理系统的框架搭建，后台管理系统不同于前台，样式及结构等相应会简单一些，因此直接导入element-plus，搭建框架即可。

一、引入插件

1、安装 unocss

UnoCSS 是一个具有高性能且极具灵活性的即时原子化 CSS 引擎，受 Windi CSS、Tailwind CSS、Twind 的启发。简单来说，就是让用户可以定制 CSS 并且用户可以使用预设的 CSS，让用户减少代码量，让 CSS 成为函数式，详细的一些 unocss 介绍可查看这篇文章《重新构想原子化 CSS》。

pnpm i unocss,@unocss/reset
pnpm add unocss -D

因为项目中使用了UnoCSS 的图标预设，因此还需要安装@iconify/json

pnpm i @iconify/json

修改 vite.config.ts

......
......
......

import Unocss from 'unocss/vite'
import {
  presetAttributify,
  presetIcons,
  presetUno,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  plugins: [
    
    ......
    ......

    // https://github.com/antfu/unocss
    // see unocss.config.ts for config
    Unocss({
      presets: [
        presetUno(),
        presetAttributify(),
        presetIcons({
          scale: 1.2,
          warn: true,
        }),
      ],
      transformers: [
        transformerDirectives(),
        transformerVariantGroup(),
      ]
    }),

  ],
});

修改 main.ts

...
...

import "uno.css";
// 引入 element-plus 网页开关灯效果的 css
import "element-plus/theme-chalk/dark/css-vars.css";

至此 unocss 安装完毕

2、安装 element-plus的 Icon 图标

pnpm install @element-plus/icons-vue

pnpm add -D unplugin-icons

至此安装完毕

二、项目框架搭建

1、router 文件夹中创建 index.ts，并且创建路由管理

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";

const routes: RouteRecordRaw[] = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "Home",
    meta: {
      title: "首页",
    },
    component: () => import(/* webpackChunkName: "home" */ "../views/Home.vue"),
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

main.ts 中全局挂载路由

...
import router from "./router";

...

const app = createApp(App);

app.use(router);

app.mount("#app");

APP.vue 中放置 <router-view /> 视图组件

在 views 文件夹中创建 Home.vue，并且在 components 文件夹中创建组件 HomeHeader.vue、HomeAside.vue、HomeMain.vue

Home.vue

<template>
  <div class="common-layout">
    <el-container direction="vertical">
      <HomeHeader />
      <el-container>
        <HomeAside />
        <HomeMain />
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import HomeHeader from "../components/HomeHeader.vue";
import HomeAside from "../components/HomeAside.vue";
import HomeMain from "../components/HomeMain.vue";
</script>

<style lang="less" scoped>

</style>

HomeHeader.vue

<template>
  <el-header height="60px">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="0">LOGO</el-menu-item>
      <div class="flex-grow" />
      <el-menu-item index="1">Processing Center</el-menu-item>
      <el-sub-menu index="2">
        <template #title>Workspace</template>
        <el-menu-item index="2-1">item one</el-menu-item>
        <el-menu-item index="2-2">item two</el-menu-item>
        <el-menu-item index="2-3">item three</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>item four</template>
          <el-menu-item index="2-4-1">item one</el-menu-item>
          <el-menu-item index="2-4-2">item two</el-menu-item>
          <el-menu-item index="2-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item @click="toggleDark()" style="height: 58px">
        <button
          class="border-none w-full bg-transparent cursor-pointer"
          style="height: var(--ep-menu-item-height)"
        >
          <i inline-flex i="dark:ep-moon ep-sunny" />
        </button>
      </el-menu-item>
    </el-menu>
  </el-header>
</template>

<script setup lang="ts">
import { useDark, useToggle } from "@vueuse/core";
import { ref } from "vue";

const isDark = useDark();
const toggleDark = useToggle(isDark);

const activeIndex = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="less" scoped>
.el-header {
  width: 100%;
  padding: 0;
}

.mode-btn {
  height: 100% !important;
}
</style>

HomeAside.vue

<template>
  <el-aside width="370px">
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="1">
            <el-icon><Aim /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-menu-item index="2">
            <el-icon><User /></el-icon>
            <span>用户信息</span>
          </el-menu-item>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><PieChart /></el-icon>
              <span>数据分析</span>
            </template>
            <el-menu-item-group title="小程序数据">
              <el-menu-item index="1-1">用户数量</el-menu-item>
              <el-menu-item index="1-2">用户浏览量</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Web端数据">
              <el-menu-item index="1-3">用户数量</el-menu-item>
              <el-menu-item index="1-4">用户浏览量</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item index="4">
            <el-icon><document /></el-icon>
            <span>问题反馈</span>
          </el-menu-item>
          <el-menu-item index="5">
            <el-icon><setting /></el-icon>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </el-aside>
</template>

<script setup lang="ts">
import {
  Aim,
  Document,
  User,
  PieChart,
  Setting,
} from "@element-plus/icons-vue";

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>

<style lang="less" scoped>
.el-aside {
  width: auto;
  .el-menu-item {
    min-width: 150px;
    padding-right: 0;
  }

  .el-col-12 {
    max-width: 100%;
  }
}
</style>

HomeMain.vue

<template>
  <el-main>
    <div>首页</div>
  </el-main>
</template>

<script setup lang="ts"></script>

<style lang="less" scoped>
.el-main {
  text-align: center;
  font-size: 80px;
  margin-top: 10px;
}
</style>

在 styles 文件夹中创建全局样式文件 global.less ，并写入一些简单的样式重置

body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
}

a {
  color: var(--ep-color-primary);
}

code {
  border-radius: 2px;
  padding: 2px 4px;
  background-color: var(--ep-color-primary-light-9);
  color: var(--ep-color-primary);
}

main.ts 中进行全局引入样式文件