珠海网站开发维护科技公司温州网页设计培训

功能13：侧边栏加入Logo

功能12：折叠/展开侧边栏
功能11：实现面包屑功能
功能10：添加首页菜单项
功能9：退出登录功能
功能8：页面权限控制
功能7：路由全局前置守卫
功能6：动态添加路由记录
功能5：侧边栏菜单动态显示
功能4：首页使用Layout布局
功能3：点击登录按钮实现页面跳转
功能2：静态登录界面
功能1：创建前端项目

前言

一.操作步骤

1.添加新组件Logo.vue

用于在侧边栏顶部显示logo图片和文字。支持折叠和展开。

<template><div class="sidebar-logo-container" :class="{ 'collapse': collapse }"><transition name="sidebarLogoFade"><div v-if="collapse" class="sidebar-logo-link"><img :src="logo" class="sidebar-logo" /></div><div v-else class="sidebar-logo-link"><img :src="logo" class="sidebar-logo" /><h1 class="sidebar-title">{{ title }}</h1></div></transition></div>
</template><script setup>
import logo from '@/assets/logo/logo.png'defineProps({collapse: {type: Boolean,required: true}
})const title = import.meta.env.VITE_APP_TITLE;
// 获取Logo背景色
const getLogoBackground = '#304156'
// 获取Logo文字颜色
const getLogoTextColor = '#ffffff'
</script><style lang="scss" scoped>
.sidebarLogoFade-enter-active {transition: opacity 1.5s;
}.sidebarLogoFade-enter,
.sidebarLogoFade-leave-to {opacity: 0;
}.sidebar-logo-container {position: relative;width: 100%;height: 50px;line-height: 50px;background: v-bind(getLogoBackground);text-align: center;overflow: hidden;& .sidebar-logo-link {height: 100%;width: 100%;& .sidebar-logo {width: 32px;height: 32px;vertical-align: middle;margin-right: 12px;}& .sidebar-title {display: inline-block;margin: 0;color: v-bind(getLogoTextColor);font-weight: 600;line-height: 50px;font-size: 14px;font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;vertical-align: middle;}}&.collapse {.sidebar-logo {margin-right: 0px;}}
}
</style>

2.修改Sidebar.vue

引用logo组件和样式调整。

<template><div class="sidebar-container"><logo :collapse="appStore.showSidebar" /><el-scrollbar class="scrollbar-wrapper"><el-menu router :default-active="activeMenu" :default-openeds="openedMenus" class="el-menu-vertical":collapse="appStore.showSidebar" unique-opened><template v-for="item in menuData" :key="item.path"><MenuItem :item="item" :level="0" /></template></el-menu></el-scrollbar></div>
</template><script setup>
import { defineProps, computed, ref } from 'vue';
import MenuItem from './MenuItem.vue';
import logo from './Logo.vue'
import { useRoute } from 'vue-router';import useAppStore from '@/stores/app'
const appStore = useAppStore()const route = useRoute()
defineProps({menuData: {type: Array,required: true}
});const activeMenu = computed(() => {return route.path
})const openedMenus = computed(() => {return route.matched.map(item => item.path).filter(path => path !== '/')
})
</script><style lang="scss" scoped>
.sidebar-container {height: 100%;background-color: #304156;.scrollbar-wrapper {height: calc(100% - 50px);}.el-menu-vertical {height: 100%;--el-menu-bg-color: #304156;--el-menu-text-color: #bfcbd9;--el-menu-active-color: #409EFF;--el-menu-hover-bg-color: #1e0b39;}.el-menu {border: none;height: 100%;width: 100% !important;}
}</style>

3.新建.env.development

定义开发环境变量。

# 页面标题
VITE_APP_TITLE = 若依管理系统# 开发环境配置
VITE_APP_ENV = 'development'# 若依管理系统/开发环境
VITE_APP_BASE_API = '/dev-api'

二.功能验证

运行项目，浏览器访问http://localhost:5173/index

三.知识点拓展

一、组件化开发（核心）

通俗理解：把页面拆分成独立的积木块，每个积木可以重复使用

代码体现：

<!-- 创建Logo组件 -->
<template><div class="sidebar-logo-container"><img :src="logo" /><h1 v-if="!collapse">{{ title }}</h1></div>
</template><!-- 在侧边栏中使用 -->
<sidebar><logo :collapse="appStore.showSidebar" />
</sidebar>

实际应用：
• 独立维护Logo显示逻辑
• 通过props接收折叠状态
• 复用组件时只需传递不同参数

---

二、Props属性传递

通俗理解：父组件通过"传纸条"的方式给子组件发送数据

实现方式：

// 子组件声明接收参数
defineProps({collapse: {type: Boolean,required: true}
})// 父组件传递参数
<logo :collapse="appStore.showSidebar" />

特点：
• 类型检查（Boolean）
• 必传校验（required: true）
• 单向数据流（子组件不能直接修改）

---

三、条件渲染与过渡动画

通俗理解：根据状态显示不同内容，切换时增加渐变效果

代码实现：

<transition name="sidebarLogoFade"><div v-if="collapse">...</div><div v-else>...</div>
</transition><style>
/* 定义过渡动画 */
.sidebarLogoFade-enter-active {transition: opacity 1.5s;
}
</style>

效果说明：
• 折叠时只显示图标
• 展开时显示图标+文字
• 切换时有1.5秒的淡入淡出效果

---

四、环境变量配置

通俗理解：根据不同的工作环境（开发/生产）自动切换配置

.env文件：

VITE_APP_TITLE = 若依管理系统
VITE_APP_BASE_API = '/dev-api'

使用方式：

const title = import.meta.env.VITE_APP_TITLE

优势：
• 敏感信息不进代码仓库
• 不同环境自动切换配置
• 前端服务无需重新打包即可改变配置

---

五、动态样式绑定

通俗理解：用JavaScript变量控制CSS样式

实现方式：

<!-- 绑定背景色和文字颜色 -->
<div :style="{ background: getLogoBackground }"><h1 :style="{ color: getLogoTextColor }"></h1>
</div><!-- CSS中使用v-bind -->
<style scoped>
.sidebar-logo-container {background: v-bind(getLogoBackground);
}
</style>

应用场景：
• 主题切换
• 动态颜色调整
• 响应式布局

---

六、CSS高度计算

通俗理解：通过计算保证布局不出现滚动条

关键代码：

.scrollbar-wrapper {height: calc(100% - 50px); /* 总高度减去Logo高度 */
}

布局技巧：

1. 侧边栏总高度100%
2. Logo固定高度50px
3. 菜单区域=总高度 - Logo高度

---

七、组件通信与状态管理

通俗理解：侧边栏折叠状态全局共享

实现链路：

Navbar点击按钮 → 修改Pinia状态 → Logo组件接收状态 → 侧边栏同步更新

代码体现：

// 状态管理
const appStore = useAppStore()// 组件接收状态
<logo :collapse="appStore.showSidebar" />

---

八、单文件组件结构

标准结构：

<template> <!-- 视图层 -->
<script>   <!-- 逻辑层 -->
<style>    <!-- 样式层 -->

优势体现：
• Logo组件自包含所有相关代码
• scoped样式避免全局污染
• 明确的导入导出关系

---

九、响应式设计深化

实现效果：

1. 折叠状态变化 → 自动更新Logo显示
2. 环境变量变化 → 自动更新标题
3. 窗口大小变化 → 自动调整布局

技术支撑：
• Composition API的响应式系统
• CSS百分比布局
• 计算属性（computed）

---

四.思考