前言
项目创建及结构梳理完毕后,开始进行后台管理系统的框架搭建,后台管理系统不同于前台,样式及结构等相应会简单一些,因此直接导入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 中进行全局引入样式文件
import "./styles/global.less";
项目框架搭建完毕,项目框架初步效果预览