vue-manage-system

The web management system solution based on Vue3 and ElementPlus。live demo

Please check the version of vue2 in tag V4.2.0

Donation

Preface

• The scheme is a set of multi-function background frame templates which are suitable for most of the WEB management system developments.
• It can be used to develop simple and good components fast based on Vue3 and ElementPlus.
• It has separations of color styles, supports manually switching themes, and it's convenient to use a custom theme color.

Function

• Element-UI
• Login/Logout
• Dashboard
• Table
• Tabs
• From
• Chart 📊
• Editor
• Markdown
• Upload pictures by clipping or dragging
• Permission
• Three level menu
• Custom icon

Installation steps

git clone https://github.com/lin-xin/vue-manage-system.git		// Clone templates
cd vue-manage-system											// Enter template directory
npm install													// Installation dependency

Local development

npm run dev

Constructing production

// Constructing project
npm run build

Component description and presentation

vue-schart

Vue.js wrapper for sChart.js. Github : vue-schart

<template>
    <div>
        <schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import Schart from "vue-schart"; // 导入Schart组件
const options = ref({
    type: "bar",
    title: {
        text: "最近一周各品类销售图",
    },
    labels: ["周一", "周二", "周三", "周四", "周五"],
    datasets: [
        {
            label: "家电",
            data: [234, 278, 270, 190, 230],
        },
        {
            label: "百货",
            data: [164, 178, 190, 135, 160],
        },
        {
            label: "食品",
            data: [144, 198, 150, 235, 120],
        },
    ],
})
</script>
<style>
    .wrapper {
        width: 7rem;
        height: 5rem;
    }
</style>

Screenshot

Default theme

Login

License

MIT