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
• Support manual switch themes ✨
• List drag sort
• Permission
• 404 / 403
• 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

// Open server and access http://localhost:8080 in browser
npm run serve

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>
    import Schart from "vue-schart"; // 导入Schart组件
    export default {
        data() {
            return {
                options: {
                    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],
                        },
                    ],
                },
            };
        },
        components: {
            Schart,
        },
    };
</script>
<style>
    .wrapper {
        width: 7rem;
        height: 5rem;
    }
</style>

element-ui

A desktop component library based on vue.js2.0 . Github : element

Screenshot

Default theme

Login

License

MIT