Vue.js JavaScript CSS HTML element vue-cli management-system
Need help with vue-manage-system?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
lin-xin

Description

基于vue + element的后台管理系统解决方案

11.6K Stars 4.0K Forks MIT License 207 Commits 65 Opened issues

Services available

Need anything else?

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

赞赏

请作者喝杯咖啡吧!(微信号:linxin_20)

微信扫一扫

特别鸣谢

前言

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

功能

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

安装步骤

git clone https://github.com/lin-xin/vue-manage-system.git      // 把模板下载到本地
cd vue-manage-system    // 进入模板目录
npm install         // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn

// 开启服务器,浏览器访问 http://localhost:8080 npm run serve

// 执行构建命令,生成的dist文件夹放在服务器下即可访问 npm run build

组件使用说明与演示

vue-schart

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

Downloads


其他注意事项

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

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

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

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

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

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

{
    index: 'editor',
    title: '富文本编辑器'
},

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

完成。

二、如何切换主题色呢?

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

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

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

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

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

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.