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

2022-04-14 13:22:35 浏览数 (1)

1

前言

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

2

功能

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

3

后台截图

4

其他

如何切换主题色呢?

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

代码语言:javascript复制
import 'element-ui/lib/theme-default/index.css'; // 默认主题

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

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

代码语言:javascript复制
@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” 去掉即可。

0 人点赞