github
/
vue-manage-system
mirror of https://github.com/lin-xin/vue-manage-system
1
0
Fork 0
Code Issues Releases Wiki Activity

更新依赖

pull/199/head
linxin 2019-08-17 15:52:45 +08:00
parent 49f8a69675
commit a7b561baf5
4 changed files with 104 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
README.md
View File

@ -1,4 +1,5 @@
# vue-manage-system # # vue-manage-system
<a href="https://github.com/vuejs/vue"> <a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue"> <img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
</a> </a>
@ -15,56 +16,61 @@
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate"> <img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
</a> </a>
基于Vue.js + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/) 基于 Vue.js + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)
本项目基于vue-cli3构建，如果是vue-cli2的请下载[旧版本V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0) 本项目基于 vue-cli3 构建，如果是 vue-cli2 的请下载[旧版本 V3.2.0](https://github.com/lin-xin/vue-manage-system/releases/tag/V3.2.0)
> React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system) > React + Ant Design 的版本正在开发中，仓库地址：[react-manage-system](https://github.com/lin-xin/react-manage-system)
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md) [English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
## 项目截图 ## ## 项目截图
### 登录 ### 登录
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png) ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms3.png)
### 默认皮肤 ### ### 默认皮肤
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png) ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms1.png)
### 浅绿色皮肤 ### ### 浅绿色皮肤
![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png) ![Image text](https://github.com/lin-xin/manage-system/raw/master/screenshots/wms2.png)
## 赞赏 ## 赞赏
请作者喝杯咖啡吧！(微信号：linxin_20) 请作者喝杯咖啡吧！(微信号：linxin_20)
![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg) ![微信扫一扫](http://blog.gdfengshuo.com/images/weixin.jpg)
## 前言 ## ## 前言
之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。 该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于 vue.js，使用 vue-cli3 脚手架，引用 Element UI 组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
（已经升级到 vue-cli@3.2.3，请更新依赖）
## 功能 ## ## 功能
- [x] Element UI
- [x] 登录/注销 - [x] Element UI
- [x] Dashboard - [x] 登录/注销
- [x] 表格 - [x] Dashboard
- [x] Tab选项卡 - [x] 表格
- [x] 表单 - [x] Tab 选项卡
- [x] 图表 :bar_chart: - [x] 表单
- [x] 富文本编辑器 - [x] 图表 :bar_chart:
- [x] markdown编辑器 - [x] 富文本编辑器
- [x] 图片拖拽/裁剪上传 - [x] markdown 编辑器
- [x] 支持切换主题色 :sparkles: - [x] 图片拖拽/裁剪上传
- [x] 列表拖拽排序 - [x] 支持切换主题色 :sparkles:
- [x] 权限测试 - [x] 列表拖拽排序
- [x] 404 / 403 - [x] 权限测试
- [x] 三级菜单 - [x] 404 / 403
- [x] 自定义图标 - [x] 三级菜单
- [x] 可拖拽弹窗 - [x] 自定义图标
- [x] 国际化 - [x] 可拖拽弹窗
- [x] 国际化
## 安装步骤
## 安装步骤 ##
``` ```
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地 git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
cd vue-manage-system // 进入模板目录 cd vue-manage-system // 进入模板目录
@ -76,57 +82,57 @@ npm run serve
// 执行构建命令，生成的dist文件夹放在服务器下即可访问 // 执行构建命令，生成的dist文件夹放在服务器下即可访问
npm run build npm run build
``` ```
## 组件使用说明与演示 ##
### vue-schart ### ## 组件使用说明与演示
vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
### vue-schart
vue.js 封装 sChart.js 的图表组件。访问地址：[vue-schart](https://github.com/linxin/vue-schart)
<p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p> <p><a href="https://www.npmjs.com/package/vue-schart"><img src="https://img.shields.io/npm/dm/vue-schart.svg" alt="Downloads"></a></p>
```html ```html
<template> <template>
<div> <div>
<schart class="wrapper" <schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
:canvasId="canvasId"
:type="type"
:data="data"
:options="options"
></schart>
</div> </div>
</template> </template>
<script> <script>
import Schart from 'vue-schart'; // 导入Schart组件 import Schart from 'vue-schart'; // 导入Schart组件
export default { export default {
data: function(){ data: function() {
return { return {
canvasId: 'myCanvas', // canvas的id canvasId: 'myCanvas', // canvas的id
type: 'bar', // 图表类型 type: 'bar', // 图表类型
data: [ data: [
{name: '2014', value: 1342}, { name: '2014', value: 1342 },
{name: '2015', value: 2123}, { name: '2015', value: 2123 },
{name: '2016', value: 1654}, { name: '2016', value: 1654 },
{name: '2017', value: 1795}, { name: '2017', value: 1795 }
], ],
options: { // 图表可选参数 options: {
// 图表可选参数
title: 'Total sales of stores in recent years' title: 'Total sales of stores in recent years'
} }
} };
}, },
components: { components: {
Schart Schart
} }
} };
</script> </script>
<style> <style>
.wrapper{ .wrapper {
width: 7rem; width: 7rem;
height: 5rem; height: 5rem;
} }
</style> </style>
``` ```
## 其他注意事项 ## ## 其他注意事项
### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ###
### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？
举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。 举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。
@ -136,14 +142,14 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
{ {
// 富文本编辑器组件 // 富文本编辑器组件
path: '/editor', path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve) component: resolve => require(['../components/page/VueEditor.vue'], resolve)
}, },
``` ```
第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。 第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。
第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。 第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。
```js ```js
{ {
index: 'editor', index: 'editor',
@ -152,30 +158,29 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
``` ```
第四步：卸载该组件。执行以下命令： 第四步：卸载该组件。执行以下命令：
npm un vue-quill-editor -S
npm un vue-quill-editor -S
完成。 完成。
### 二、如何切换主题色呢？ ### ### 二、如何切换主题色呢？
第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。 第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。
```javascript ```javascript
import 'element-ui/lib/theme-default/index.css'; // 默认主题 import 'element-ui/lib/theme-default/index.css'; // 默认主题
// import '../static/css/theme-green/index.css'; // 浅绿色主题 // import './assets/css/theme-green/index.css'; // 浅绿色主题
``` ```
第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。 第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。
```javascript ```javascript
@import "../static/css/main.css"; @import "./assets/css/main.css";
@import "../static/css/color-dark.css"; /*深色主题*/ @import "./assets/css/color-dark.css"; /*深色主题*/
/*@import "../static/css/theme-green/color-green.css"; !*浅绿色主题*!*/ /*@import "./assets/css/theme-green/color-green.css"; !*浅绿色主题*!*/
``` ```
第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。 第三步：打开 src/components/common/Sidebar.vue 文件，找到 el-menu 标签，把 background-color/text-color/active-text-color 属性去掉即可。
## License ## License
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE) [MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)

10
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-manage-system", "name": "vue-manage-system",
"version": "4.0.1", "version": "4.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "npm run serve", "dev": "npm run serve",
@ -16,13 +16,13 @@
"vue-cropperjs": "^3.0.0", "vue-cropperjs": "^3.0.0",
"vue-i18n": "^8.10.0", "vue-i18n": "^8.10.0",
"vue-quill-editor": "^3.0.6", "vue-quill-editor": "^3.0.6",
"vue-router": "^3.0.1", "vue-router": "^3.0.3",
"vue-schart": "^1.0.0", "vue-schart": "^1.0.0",
"vuedraggable": "^2.17.0" "vuedraggable": "^2.17.0"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0", "@vue/cli-plugin-babel": "^3.9.0",
"@vue/cli-service": "^3.2.0", "@vue/cli-service": "^3.9.0",
"vue-template-compiler": "^2.5.21" "vue-template-compiler": "^2.6.10"
} }
} }

6
src/main.js
View File

@ -1,7 +1,6 @@
import Vue from 'vue'; import Vue from 'vue';
import App from './App.vue'; import App from './App.vue';
import router from './router'; import router from './router';
import axios from 'axios';
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import VueI18n from 'vue-i18n'; import VueI18n from 'vue-i18n';
import { messages } from './components/common/i18n'; import { messages } from './components/common/i18n';
@ -16,7 +15,9 @@ Vue.use(VueI18n);
Vue.use(ElementUI, { Vue.use(ElementUI, {
size: 'small' size: 'small'
}); });
Vue.prototype.$axios = axios; Vue.use(wysiwyg, {
maxHeight: '600px'
});
const i18n = new VueI18n({ const i18n = new VueI18n({
locale: 'zh', locale: 'zh',
@ -25,6 +26,7 @@ const i18n = new VueI18n({
//使用钩子函数对路由进行权限跳转 //使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
document.title = `${to.meta.title} | vue-manage-system`;
const role = localStorage.getItem('ms_username'); const role = localStorage.getItem('ms_username');
if (!role && to.path !== '/login') { if (!role && to.path !== '/login') {
next('/login'); next('/login');

44
src/router/index.js
View File

@ -11,106 +11,106 @@ export default new Router({
}, },
{ {
path: '/', path: '/',
component: resolve => require(['../components/common/Home.vue'], resolve), component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'),
meta: { title: '自述文件' }, meta: { title: '自述文件' },
children:[ children: [
{ {
path: '/dashboard', path: '/dashboard',
component: resolve => require(['../components/page/Dashboard.vue'], resolve), component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Dashboard.vue'),
meta: { title: '系统首页' } meta: { title: '系统首页' }
}, },
{ {
path: '/icon', path: '/icon',
component: resolve => require(['../components/page/Icon.vue'], resolve), component: () => import(/* webpackChunkName: "icon" */ '../components/page/Icon.vue'),
meta: { title: '自定义图标' } meta: { title: '自定义图标' }
}, },
{ {
path: '/table', path: '/table',
component: resolve => require(['../components/page/BaseTable.vue'], resolve), component: () => import(/* webpackChunkName: "table" */ '../components/page/BaseTable.vue'),
meta: { title: '基础表格' } meta: { title: '基础表格' }
}, },
{ {
path: '/tabs', path: '/tabs',
component: resolve => require(['../components/page/Tabs.vue'], resolve), component: () => import(/* webpackChunkName: "tabs" */ '../components/page/Tabs.vue'),
meta: { title: 'tab选项卡' } meta: { title: 'tab选项卡' }
}, },
{ {
path: '/form', path: '/form',
component: resolve => require(['../components/page/BaseForm.vue'], resolve), component: () => import(/* webpackChunkName: "form" */ '../components/page/BaseForm.vue'),
meta: { title: '基本表单' } meta: { title: '基本表单' }
}, },
{ {
// 富文本编辑器组件 // 富文本编辑器组件
path: '/editor', path: '/editor',
component: resolve => require(['../components/page/VueEditor.vue'], resolve), component: () => import(/* webpackChunkName: "editor" */ '../components/page/VueEditor.vue'),
meta: { title: '富文本编辑器' } meta: { title: '富文本编辑器' }
}, },
{ {
// markdown组件 // markdown组件
path: '/markdown', path: '/markdown',
component: resolve => require(['../components/page/Markdown.vue'], resolve), component: () => import(/* webpackChunkName: "markdown" */ '../components/page/Markdown.vue'),
meta: { title: 'markdown编辑器' } meta: { title: 'markdown编辑器' }
}, },
{ {
// 图片上传组件 // 图片上传组件
path: '/upload', path: '/upload',
component: resolve => require(['../components/page/Upload.vue'], resolve), component: () => import(/* webpackChunkName: "upload" */ '../components/page/Upload.vue'),
meta: { title: '文件上传' } meta: { title: '文件上传' }
}, },
{ {
// vue-schart组件 // vue-schart组件
path: '/charts', path: '/charts',
component: resolve => require(['../components/page/BaseCharts.vue'], resolve), component: () => import(/* webpackChunkName: "chart" */ '../components/page/BaseCharts.vue'),
meta: { title: 'schart图表' } meta: { title: 'schart图表' }
}, },
{ {
// 拖拽列表组件 // 拖拽列表组件
path: '/drag', path: '/drag',
component: resolve => require(['../components/page/DragList.vue'], resolve), component: () => import(/* webpackChunkName: "drag" */ '../components/page/DragList.vue'),
meta: { title: '拖拽列表' } meta: { title: '拖拽列表' }
}, },
{ {
// 拖拽Dialog组件 // 拖拽Dialog组件
path: '/dialog', path: '/dialog',
component: resolve => require(['../components/page/DragDialog.vue'], resolve), component: () => import(/* webpackChunkName: "dragdialog" */ '../components/page/DragDialog.vue'),
meta: { title: '拖拽弹框' } meta: { title: '拖拽弹框' }
}, },
{ {
// 国际化组件 // 国际化组件
path: '/i18n', path: '/i18n',
component: resolve => require(['../components/page/I18n.vue'], resolve), component: () => import(/* webpackChunkName: "i18n" */ '../components/page/I18n.vue'),
meta: { title: '国际化' } meta: { title: '国际化' }
}, },
{ {
// 权限页面 // 权限页面
path: '/permission', path: '/permission',
component: resolve => require(['../components/page/Permission.vue'], resolve), component: () => import(/* webpackChunkName: "permission" */ '../components/page/Permission.vue'),
meta: { title: '权限测试', permission: true } meta: { title: '权限测试', permission: true }
}, },
{ {
path: '/404', path: '/404',
component: resolve => require(['../components/page/404.vue'], resolve), component: () => import(/* webpackChunkName: "404" */ '../components/page/404.vue'),
meta: { title: '404' } meta: { title: '404' }
}, },
{ {
path: '/403', path: '/403',
component: resolve => require(['../components/page/403.vue'], resolve), component: () => import(/* webpackChunkName: "403" */ '../components/page/403.vue'),
meta: { title: '403' } meta: { title: '403' }
}, },
{ {
path: '/donate', path: '/donate',
component: resolve => require(['../components/page/Donate.vue'], resolve), component: () => import(/* webpackChunkName: "donate" */ '../components/page/Donate.vue'),
meta: { title: '支持作者' } meta: { title: '支持作者' }
} }
] ]
}, },
{ {
path: '/login', path: '/login',
component: resolve => require(['../components/page/Login.vue'], resolve) component: () => import(/* webpackChunkName: "login" */ '../components/page/Login.vue')
}, },
{ {
path: '*', path: '*',
redirect: '/404' redirect: '/404'
} }
] ]
}) });