- Notifications
You must be signed in to change notification settings - Fork0
The web management system solution based on Vue2 and Element UI.
License
coder-wangbin/vue-manage-system
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
基于Vue.js + Element UI 的后台管理系统解决方案。线上地址
本项目基于vue-cli3构建，如果是vue-cli2的请下载旧版本V3.2.0
React + Ant Design 的版本正在开发中，仓库地址：react-manage-system
请作者喝杯咖啡吧！(微信号：linxin_20)
之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。（已经升级到 vue-cli@3.2.3，请更新依赖）
- Element UI
- 登录/注销
- Dashboard
- 表格
- Tab选项卡
- 表单
- 图表 📊
- 富文本编辑器
- markdown编辑器
- 图片拖拽/裁剪上传
- 支持切换主题色 ✨
- 列表拖拽排序
- 权限测试
- 404 / 403
- 三级菜单
- 自定义图标
- 可拖拽弹窗
- 国际化
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地cd vue-manage-system // 进入模板目录npm install // 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn// 开启服务器，浏览器访问 http://localhost:8080npm run serve// 执行构建命令，生成的dist文件夹放在服务器下即可访问npm run buildvue.js封装sChart.js的图表组件。访问地址：vue-schart
<template><div><schartclass="wrapper":canvasId="canvasId":type="type":data="data":options="options"></schart></div></template><script>importSchartfrom'vue-schart';// 导入Schart组件exportdefault{data:function(){return{canvasId:'myCanvas',// canvas的idtype:'bar',// 图表类型data:[{name:'2014',value:1342},{name:'2015',value:2123},{name:'2016',value:1654},{name:'2017',value:1795},],options:{// 图表可选参数title:'Total sales of stores in recent years'}}},components:{ Schart}}</script><style>.wrapper{width:7rem;height:5rem;}</style>
举个栗子，我不想用 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 '../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 标签，把 background-color/text-color/active-text-color 属性去掉即可。
About
The web management system solution based on Vue2 and Element UI.
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Languages
- Vue83.9%
- JavaScript11.9%
- CSS3.6%
- HTML0.6%