近日见闻
- GEEKCON 2023将于10月24日在上海正式拉开帷幕。--GEEKCON
- VSCode决定放弃Python3.7！微软新发布的Visual Studio Code 扩展中，已经废弃了对Python3.7 的支持。在2022年底，VS Code 的Python插件已经停止了对 Python3.6 的支持。-- VS Code
- 祈祷世界和平！--巴以冲突
开源vue管理系统学习
昨天文章发的着急了，没把图发出来，昨天将UnoCSS的图标添加进去了，效果如下：
今天在开发layout的时候，elmentplus只给出大的框架，需要我们自己去设计和填充头部、侧栏、主要内容和页脚。所以简单做了一个页面复习下框架。
大部分项目都是在这个基础上扩展出来的。将头部、logo、侧栏、内容和页脚都分别抽离成一个组件进行开发，这样对于后期的扩展和修改是比较方便的。想起来刚开始我自己学习的时候，是将这些内容全部放在一个layout.vue组件中的，前期修改还是很方便的，。所以还是得看情况去开发，如果项目简单且小的话，我觉得全部放一块并没有什么问题。但是如果想做的大一些，长期维护的话还是一开始就做的分离出来一些比较好！
今天我们来学习下开源的后台框架v3-admin，正好我也在使用这一套技术栈，向优秀的开源框架学习一定会收获很多。仓库地址：https://github.com/un-pany/v3-admin-vite
页面效果：
我们看看人家代码关于layout是怎么写的：
代码语言：javascript复制<template>
<div :class="classes">
<!-- 左侧模式 -->
<LeftMode v-if="layoutMode === 'left' || appStore.device === DeviceEnum.Mobile" />
<!-- 顶部模式 -->
<TopMode v-else-if="layoutMode === 'top'" />
<!-- 混合模式 -->
<LeftTopMode v-else-if="layoutMode === 'left-top'" />
<!-- 右侧设置面板 -->
<RightPanel v-if="showSettings">
<Settings />
</RightPanel>
</div>
</template>
<LeftMode v-if="layoutMode === 'left' || appStore.device === DeviceEnum.Mobile" />:
这是一个Vue组件LeftMode，它使用了v-if指令来进行条件渲染。只有当layoutMode的值等于'left'，或者当appStore.device的值等于DeviceEnum.Mobile时，才会渲染这个组件。以上这段代码根据数据属性layoutMode和showSettings的值来动态渲染不同的组件，实现了不同的布局效果，从而根据条件渲染在页面中显示不同的用户界面。
这里作者分为了三种模式，一种是左侧模式，一种顶部模式就是菜单在顶部，混合模式就是左侧加顶部模式。
再看看代码结构，就可以知道功能划分的比较清楚了，有侧栏、面包屑、页脚、logo、导航栏、右侧设置显示模式的组件等。
代码语言：javascript复制│ index.vue
│ LeftMode.vue
│ LeftTopMode.vue
│ TopMode.vue
│
├─components
│ │ AppMain.vue
│ │ index.ts
│ │
│ ├─Breadcrumb
│ │ index.vue
│ │
│ ├─CompConsumer
│ │ index.ts
│ │
│ ├─Footer
│ │ index.vue
│ │
│ ├─Hamburger
│ │ index.vue
│ │
│ ├─Logo
│ │ index.vue
│ │
│ ├─NavigationBar
│ │ index.vue
│ │
│ ├─RightPanel
│ │ index.vue
│ │
│ ├─Settings
│ │ index.vue
│ │ SelectLayoutMode.vue
│ │
│ ├─Sidebar
│ │ index.vue
│ │ SidebarItem.vue
│ │ SidebarItemLink.vue
│ │
│ └─TagsView
│ index.vue
│ ScrollPane.vue
所以如果想要快速学习，那就像我那样简单布局在一个vue组件中就行，但是想要学的深入些，就得规范一些了，想这些开源项目学习收获真是不少。
