vue-manage-systema href=https://github.com/vuejs/vue img src=https://img.shields.io/badge/vue-3.1.2-brightgreen.svg alt=vue /a a href=https://github.com/vuejs/pinia img src=https://img.shields.io/badge/pinia-2.0.14-brightgreen.svg alt=pinia /a a href=https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE img src=https://img.shields.io/github/license/mashape/apistatus.svg alt=license /a a href=https://github.com/lin-xin/vue-manage-system/releases img src=https://img.shields.io/github/release/lin-xin/vue-manage-system.svg alt=GitHub release /a a href=https://lin-xin.gitee.io/example/work//donate img src=https://img.shields.io/badge/%24-donate-ff69b4.svg alt=donate /a基于 Vue3 + pinia + Element Plus 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/) Vue2 版本请看 [tag-V4.2.0](https://github.com/lin-xin/vue-manage-system/tree/V4.2.0)[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md) 赞助商 好问[img src=https://static.bestqa.net/logo/bestqa_haowen.png width=220 height=100](https://www.bestqa.net/home/index.html)专业问卷服务，一对一客服，按需定制 支持作者请作者喝杯咖啡吧！(微信号：linxin_20) 前言该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统开发。基于 Vue3 + pinia + typescript，引用 Element Plus 组件库，方便开发。实现逻辑简单，适合外包项目，快速交付。 功能- [x] Element Plus- [x] vite 3- [x] pinia- [x] typescript- [x] 登录/注销- [x] Dashboard- [x] 表格- [x] Tab 选项卡- [x] 表单- [x] 图表 :bar_chart:- [x] 富文本/markdown编辑器- [x] 图片拖拽/裁剪上传- [x] 权限管理- [x] 三级菜单- [x] 自定义图标 安装步骤 因为使用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-schartvue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://github.com/lin-xin/vue-schart/) pa href=https://www.npmjs.com/package/vue-schartimg src=https://img.shields.io/npm/dm/vue-schart.svg alt=Downloads/a/p```htmltemplate div schart class=wrapper canvasId=myCanvas :options=options/schart /div/templatescript setup lang=tsimport { 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], }, ],})/scriptstyle .wrapper { width: 7rem; height: 5rem; }/style``` 项目截图 登录 首页 License[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)