Skip to content

lin-xin/vue-manage-system

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

vue-manage-system

vue pinia license GitHub release donate

基于 Vue3 + pinia + Element Plus 的后台管理系统解决方案。线上地址

Vue2 版本请看 tag-V4.2.0

English document

赞助商

好问

专业问卷服务,一对一客服,按需定制

支持作者

请作者喝杯咖啡吧!(微信号:linxin_20)

微信扫一扫

前言

该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统开发。基于 Vue3 + pinia + typescript,引用 Element Plus 组件库,方便开发。实现逻辑简单,适合外包项目,快速交付。

功能

  • Element Plus
  • vite 3
  • pinia
  • typescript
  • 登录/注销
  • Dashboard
  • 表格
  • Tab 选项卡
  • 表单
  • 图表 📊
  • 富文本/markdown编辑器
  • 图片拖拽/裁剪上传
  • 权限管理
  • 三级菜单
  • 自定义图标

安装步骤

因为使用vite3,node版本需要 14.18+

git clone https://github.com/lin-xin/vue-manage-system.git      // 把模板下载到本地
cd vue-manage-system    // 进入模板目录
npm install         // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn

// 运行
npm run dev

// 执行构建命令,生成的dist文件夹放在服务器下即可访问
npm run build

组件使用说明与演示

vue-schart

vue.js 封装 sChart.js 的图表组件。访问地址:vue-schart

Downloads

<template>
    <div>
        <schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
    </div>
</template>

<script setup lang="ts">
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>

项目截图

登录

Image text

首页

Image text

License

MIT