V3-Admin Learning

  • 2023/10/12
  • 3-minute read

Recent News

  1. GEEKCON 2023 is set to kick off in Shanghai on October 24th. –GEEKCON

  2. VSCode has decided to drop support for Python 3.7! Microsoft’s newly released Visual Studio Code extensions have deprecated support for Python 3.7. By the end of 2022, VS Code’s Python plugin had already stopped supporting Python 3.6. –VS Code

  3. Pray for world peace! –Israel-Palestine conflict

Learning about an Open Source Vue Management System

Yesterday, I was in a hurry when I posted the article and forgot to include the images. Yesterday, I added the UnoCSS icons to the article, and here’s how it looks:

Today, while developing the layout, Element Plus provides a basic framework and requires us to design and fill in the header, sidebar, main content, and footer ourselves. So, I created a simple page to review the framework, as most projects are built upon this foundation. I separated the header, logo, sidebar, content, and footer into individual components for development. This makes it easier to extend and modify in the future. I remember when I first started learning, I used to put all these elements in a single layout.vue component, which was convenient for initial modifications. So, it really depends on the project; for smaller and simpler projects, it’s fine to keep everything together. However, if you plan to work on a larger project with long-term maintenance, it’s better to start with a more modular approach.

Today, let’s learn about the open-source backend framework v3-admin, which I happen to be using in my tech stack. Learning from excellent open-source frameworks can be very rewarding.

Repository link: https://github.com/un-pany/v3-admin-vite

Page Preview:

Let’s take a look at how the code is structured for the layout:

<template>
  <div :class="classes">
    <!-- Left Mode -->
    <LeftMode v-if="layoutMode === 'left' || appStore.device === DeviceEnum.Mobile" />
    <!-- Top Mode -->
    <TopMode v-else-if="layoutMode === 'top'" />
    <!-- Mixed Mode -->
    <LeftTopMode v-else-if="layoutMode === 'left-top'" />
    <!-- Right Settings Panel -->
    <RightPanel v-if="showSettings">
      <Settings />
    </RightPanel>
  </div>
</template>

In this code snippet, the author uses conditional rendering with v-if based on the values of data attributes layoutMode and showSettings to dynamically render different components. This achieves different layout effects based on the conditions, rendering different user interfaces on the page.

The author has divided the layout into three modes: left mode, top mode (where the menu is at the top), and a mixed mode that combines left and top. Looking at the code structure, it’s clear how the functionality is organized, with components for the sidebar, breadcrumbs, footer, logo, navigation bar, and the right panel for layout mode settings, among others.

So, if you want to learn quickly, you can start with a simple layout in a single Vue component, as I did. However, if you want to dive deeper, it’s better to follow a more structured approach. These open-source projects can be a valuable source of learning and inspiration.

CI/CD