V3-Admin布局学习

2023/10/12
阅读时间 1 分钟

近日见闻

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是怎么写的：

<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>

这是一个Vue组件LeftMode，它使用了v-if指令来进行条件渲染。只有当layoutMode的值等于’left’，或者当appStore.device的值等于DeviceEnum.Mobile时，才会渲染这个组件。以上这段代码根据数据属性layoutMode和showSettings的值来动态渲染不同的组件，实现了不同的布局效果，从而根据条件渲染在页面中显示不同的用户界面。

这里作者分为了三种模式，一种是左侧模式，一种顶部模式就是菜单在顶部，混合模式就是左侧加顶部模式。再看看代码结构，就可以知道功能划分的比较清楚了，有侧栏、面包屑、页脚、logo、导航栏、右侧设置显示模式的组件等。

│  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组件中就行，但是想要学的深入些，就得规范一些了，向这些开源项目学习收获真是不少。

10月