在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:vue-manage-system开源软件地址:https://gitee.com/lin-xin/vue-manage-system开源软件介绍:vue-manage-system基于 Vue3 + Element Plus 的后台管理系统解决方案。线上地址
项目截图登录首页赞赏请作者喝杯咖啡吧!(微信号:linxin_20) 前言该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于 Vue3,使用 vue-cli3 脚手架,引用 Element Plus 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。 功能
安装步骤git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地cd vue-manage-system // 进入模板目录npm install // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn// 开启服务器,浏览器访问 http://localhost:8080npm run dev// 执行构建命令,生成的dist文件夹放在服务器下即可访问npm run build 组件使用说明与演示vue-schartvue.js 封装 sChart.js 的图表组件。访问地址: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> License |
请发表评论