Xedge>> rubber-admin-ui>> 返回
项目作者： luffyu

项目描述 ：
rubber-admin的后台管理界面，vue+elementui完成
高级语言： Vue
项目地址: git://github.com/luffyu/rubber-admin-ui.git
创建时间： 2020-01-09T03:26:44Z
项目社区：https://github.com/luffyu/rubber-admin-ui
开源协议：MIT License
下载


vue-manage-system


vue


element-ui


license


GitHub release


donate

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

React + Ant Design 的版本正在开发中，仓库地址：react-manage-system

English document

项目截图

登录

Image text

默认皮肤

Image text

浅绿色皮肤

Image text

特别鸣谢

前言

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

功能

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

安装步骤

  1. git clone https://github.com/lin-xin/vue-manage-system.git      // 把模板下载到本地
  2. cd vue-manage-system    // 进入模板目录
  3. npm install         // 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn
  5. // 开启服务器，浏览器访问 http://localhost:8080
  6. npm run serve
  8. // 执行构建命令，生成的dist文件夹放在服务器下即可访问
  9. npm run build

组件使用说明与演示

vue-schart

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

Downloads

  1. <template>
  2.     <div>
  3.         <schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
  4.     </div>
  5. </template>
  7. <script>
  8.     import Schart from 'vue-schart'; // 导入Schart组件
  9.     export default {
  10.         data() {
  11.             return {
  12.                 options: {
  13.                     type: 'bar',
  14.                     title: {
  15.                         text: '最近一周各品类销售图'
  16.                     },
  17.                     labels: ['周一', '周二', '周三', '周四', '周五'],
  18.                     datasets: [
  19.                         {
  20.                             label: '家电',
  21.                             data: [234, 278, 270, 190, 230]
  22.                         },
  23.                         {
  24.                             label: '百货',
  25.                             data: [164, 178, 190, 135, 160]
  26.                         },
  27.                         {
  28.                             label: '食品',
  29.                             data: [144, 198, 150, 235, 120]
  30.                         }
  31.                     ]
  32.                 }
  33.             };
  34.         },
  35.         components: {
  36.             Schart
  37.         }
  38.     };
  39. </script>
  40. <style>
  41.     .wrapper {
  42.         width: 7rem;
  43.         height: 5rem;
  44.     }
  45. </style>

其他注意事项

一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？

举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。

第一步：删除该组件的路由，在目录 src/router/index.js 中，找到引入改组件的路由，删除下面这段代码。

  1. {
  2.     // 富文本编辑器组件
  3.     path: '/editor',
  4.     component: resolve => require(['../components/page/VueEditor.vue'], resolve)
  5. },

第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。

第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。

  1. {
  2.     index: 'editor',
  3.     title: '富文本编辑器'
  4. },

第四步：卸载该组件。执行以下命令：
npm un vue-quill-editor -S

完成。

二、如何切换主题色呢？

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

  1. import 'element-ui/lib/theme-default/index.css'; // 默认主题
  2. // import './assets/css/theme-green/index.css';       // 浅绿色主题

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

  1. @import "./assets/css/main.css";
  2. @import "./assets/css/color-dark.css";     /*深色主题*/
  3. /*@import "./assets/css/theme-green/color-green.css";   !*浅绿色主题*!*/

第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。

License

MIT