Go to file

lin-xin c8cae1b200 升级了部分功能		2024-01-06 18:57:49 +08:00
.github	Create FUNDING.yml	2020-07-06 11:10:27 +08:00
public	新增了导入导出excel，以及做了一些优化	2022-12-17 13:37:31 +08:00
screenshots	feature:升级到vue3和element-plus	2021-03-15 23:13:23 +08:00
src	升级了部分功能	2024-01-06 18:57:49 +08:00
.gitignore	feature:升级到vue3和element-plus	2021-03-15 23:13:23 +08:00
LICENSE	改为typescript；升级elementplus	2022-08-21 16:59:12 +08:00
README.md	Update README.md	2022-09-02 21:04:06 +08:00
README_EN.md	改为typescript；升级elementplus	2022-08-21 16:59:12 +08:00
auto-imports.d.ts	改为typescript；升级elementplus	2022-08-21 16:59:12 +08:00
components.d.ts	升级了部分功能	2024-01-06 18:57:49 +08:00
index.html	升级了部分功能	2024-01-06 18:57:49 +08:00
package-lock.json	新增了导入导出excel，以及做了一些优化	2022-12-17 13:37:31 +08:00
package.json	升级了部分功能	2024-01-06 18:57:49 +08:00
tsconfig.json	升级了部分功能	2024-01-06 18:57:49 +08:00
tsconfig.node.json	改为typescript；升级elementplus	2022-08-21 16:59:12 +08:00
vite.config.ts	改为typescript；升级elementplus	2022-08-21 16:59:12 +08:00
yarn.lock	升级了部分功能	2024-01-06 18:57:49 +08:00

README_EN.md

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 as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue3 and ElementPlus. Color separation of color style, support manual switch themes, and it is 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

License

MIT