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