1

前言


该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(Web Management System)开发。基于 vue.js,使用 vue-cli3 脚手架,引用 Element UI 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。



2

功能


  • Element UI
  • 登录/注销
  • Dashboard
  • 表格
  • Tab 选项卡
  • 表单
  • 图表
  • 富文本编辑器
  • markdown 编辑器
  • 图片拖拽/裁剪上传
  • 支持切换主题色
  • 列表拖拽排序
  • 权限测试
  • 404 / 403
  • 三级菜单
  • 自定义图标
  • 可拖拽弹窗
  • 国际化



3

后台截图


一款超级漂亮的 Vue + Element UI 后台管理系统解决方案 | 开源项目_开源项目

一款超级漂亮的 Vue + Element UI 后台管理系统解决方案 | 开源项目_css_02

一款超级漂亮的 Vue + Element UI 后台管理系统解决方案 | 开源项目_开源项目_03

一款超级漂亮的 Vue + Element UI 后台管理系统解决方案 | 开源项目_拖拽_04

一款超级漂亮的 Vue + Element UI 后台管理系统解决方案 | 开源项目_css_05

一款超级漂亮的 Vue + Element UI 后台管理系统解决方案 | 开源项目_css_06

一款超级漂亮的 Vue + Element UI 后台管理系统解决方案 | 开源项目_拖拽_07

一款超级漂亮的 Vue + Element UI 后台管理系统解决方案 | 开源项目_开源项目_08

一款超级漂亮的 Vue + Element UI 后台管理系统解决方案 | 开源项目_拖拽_09

一款超级漂亮的 Vue + Element UI 后台管理系统解决方案 | 开源项目_拖拽_10

(点击图片查看大图)



4

其他


如何切换主题色呢?


第一步:打开 src/main.js 文件,找到引入 element 样式的地方,换成浅绿色主题。


import 'element-ui/lib/theme-default/index.css'; // 默认主题

// import '../static/css/theme-green/index.css'; // 浅绿色主题


第二步:打开 src/App.vue 文件,找到 style 标签引入样式的地方,切换成浅绿色主题。


@import "../static/css/main.css";

@import "../static/css/color-dark.css"; /*深色主题*/

/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/


第三步:打开 src/components/common/Sidebar.vue 文件,找到 el-menu 标签,把 theme=“dark” 去掉即可。


最后,需要这套后台框架的小伙伴,后台回复关键词【0411】就可以获得相关下载信息了哦!


 

—END—