更新依赖
linxin
parent
49f8a69675
commit
a7b561baf5
141
README.md
141
README.md
|
|
@ -1,4 +1,5 @@
|
|||
# vue-manage-system #
|
||||
# vue-manage-system
|
||||
|
||||
<a href="https://github.com/vuejs/vue">
|
||||
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
|
||||
</a>
|
||||
|
|
@ -15,56 +16,61 @@
|
|||
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
|
||||
</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)
|
||||
|
||||
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
|
||||
|
||||
## 项目截图 ##
|
||||
## 项目截图
|
||||
|
||||
### 登录
|
||||
|
||||
|
||||
|
||||
### 默认皮肤 ###
|
||||
### 默认皮肤
|
||||
|
||||
|
||||
|
||||
### 浅绿色皮肤 ###
|
||||
### 浅绿色皮肤
|
||||
|
||||
|
||||
|
||||
## 赞赏
|
||||
|
||||
请作者喝杯咖啡吧！(微信号：linxin_20)
|
||||
|
||||
|
||||
|
||||
## 前言 ##
|
||||
之前在公司用了Vue + Element组件库做了个后台管理系统，基本很多组件可以直接引用组件库的，但是也有一些需求无法满足。像图片裁剪上传、富文本编辑器、图表等这些在后台管理系统中很常见的功能，就需要引用其他的组件才能完成。从寻找组件，到使用组件的过程中，遇到了很多问题，也积累了宝贵的经验。所以我就把开发这个后台管理系统的经验，总结成这个后台管理系统解决方案。
|
||||
## 前言
|
||||
|
||||
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（Web Management System）开发。基于vue.js,使用vue-cli@3.2.3脚手架快速生成项目目录，引用Element UI组件库，方便开发快速简洁好看的组件。分离颜色样式，支持手动切换主题色，而且很方便使用自定义主题色。
|
||||
（已经升级到 vue-cli@3.2.3，请更新依赖）
|
||||
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（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] 国际化
|
||||
## 功能
|
||||
|
||||
- [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 // 进入模板目录
|
||||
|
|
@ -76,57 +82,57 @@ npm run serve
|
|||
// 执行构建命令，生成的dist文件夹放在服务器下即可访问
|
||||
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>
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<schart class="wrapper"
|
||||
:canvasId="canvasId"
|
||||
:type="type"
|
||||
:data="data"
|
||||
:options="options"
|
||||
></schart>
|
||||
<schart class="wrapper" :canvasId="canvasId" :type="type" :data="data" :options="options"></schart>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import Schart from 'vue-schart'; // 导入Schart组件
|
||||
import Schart from 'vue-schart'; // 导入Schart组件
|
||||
export default {
|
||||
data: function(){
|
||||
data: function() {
|
||||
return {
|
||||
canvasId: 'myCanvas', // canvas的id
|
||||
type: 'bar', // 图表类型
|
||||
canvasId: 'myCanvas', // canvas的id
|
||||
type: 'bar', // 图表类型
|
||||
data: [
|
||||
{name: '2014', value: 1342},
|
||||
{name: '2015', value: 2123},
|
||||
{name: '2016', value: 1654},
|
||||
{name: '2017', value: 1795},
|
||||
{ name: '2014', value: 1342 },
|
||||
{ name: '2015', value: 2123 },
|
||||
{ name: '2016', value: 1654 },
|
||||
{ name: '2017', value: 1795 }
|
||||
],
|
||||
options: { // 图表可选参数
|
||||
options: {
|
||||
// 图表可选参数
|
||||
title: 'Total sales of stores in recent years'
|
||||
}
|
||||
}
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Schart
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.wrapper{
|
||||
width: 7rem;
|
||||
height: 5rem;
|
||||
}
|
||||
.wrapper {
|
||||
width: 7rem;
|
||||
height: 5rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 其他注意事项 ##
|
||||
### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？ ###
|
||||
## 其他注意事项
|
||||
|
||||
### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？
|
||||
|
||||
举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。
|
||||
|
||||
|
|
@ -136,14 +142,14 @@ vue.js封装sChart.js的图表组件。访问地址：[vue-schart](https://githu
|
|||
{
|
||||
// 富文本编辑器组件
|
||||
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/common/Sidebar.vue 中，找到该入口，删除下面这段代码。
|
||||
|
||||
|
||||
```js
|
||||
{
|
||||
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 样式的地方，换成浅绿色主题。
|
||||
|
||||
```javascript
|
||||
import 'element-ui/lib/theme-default/index.css'; // 默认主题
|
||||
// import '../static/css/theme-green/index.css'; // 浅绿色主题
|
||||
import 'element-ui/lib/theme-default/index.css'; // 默认主题
|
||||
// import './assets/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"; !*浅绿色主题*!*/
|
||||
@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](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
10
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "vue-manage-system",
|
||||
"version": "4.0.1",
|
||||
"version": "4.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run serve",
|
||||
|
|
@ -16,13 +16,13 @@
|
|||
"vue-cropperjs": "^3.0.0",
|
||||
"vue-i18n": "^8.10.0",
|
||||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "^3.0.1",
|
||||
"vue-router": "^3.0.3",
|
||||
"vue-schart": "^1.0.0",
|
||||
"vuedraggable": "^2.17.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.2.0",
|
||||
"@vue/cli-service": "^3.2.0",
|
||||
"vue-template-compiler": "^2.5.21"
|
||||
"@vue/cli-plugin-babel": "^3.9.0",
|
||||
"@vue/cli-service": "^3.9.0",
|
||||
"vue-template-compiler": "^2.6.10"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import Vue from 'vue';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import axios from 'axios';
|
||||
import ElementUI from 'element-ui';
|
||||
import VueI18n from 'vue-i18n';
|
||||
import { messages } from './components/common/i18n';
|
||||
|
|
@ -16,7 +15,9 @@ Vue.use(VueI18n);
|
|||
Vue.use(ElementUI, {
|
||||
size: 'small'
|
||||
});
|
||||
Vue.prototype.$axios = axios;
|
||||
Vue.use(wysiwyg, {
|
||||
maxHeight: '600px'
|
||||
});
|
||||
|
||||
const i18n = new VueI18n({
|
||||
locale: 'zh',
|
||||
|
|
@ -25,6 +26,7 @@ const i18n = new VueI18n({
|
|||
|
||||
//使用钩子函数对路由进行权限跳转
|
||||
router.beforeEach((to, from, next) => {
|
||||
document.title = `${to.meta.title} | vue-manage-system`;
|
||||
const role = localStorage.getItem('ms_username');
|
||||
if (!role && to.path !== '/login') {
|
||||
next('/login');
|
||||
|
|
|
|||
|
|
@ -11,106 +11,106 @@ export default new Router({
|
|||
},
|
||||
{
|
||||
path: '/',
|
||||
component: resolve => require(['../components/common/Home.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "home" */ '../components/common/Home.vue'),
|
||||
meta: { title: '自述文件' },
|
||||
children:[
|
||||
children: [
|
||||
{
|
||||
path: '/dashboard',
|
||||
component: resolve => require(['../components/page/Dashboard.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "dashboard" */ '../components/page/Dashboard.vue'),
|
||||
meta: { title: '系统首页' }
|
||||
},
|
||||
{
|
||||
path: '/icon',
|
||||
component: resolve => require(['../components/page/Icon.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "icon" */ '../components/page/Icon.vue'),
|
||||
meta: { title: '自定义图标' }
|
||||
},
|
||||
{
|
||||
path: '/table',
|
||||
component: resolve => require(['../components/page/BaseTable.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "table" */ '../components/page/BaseTable.vue'),
|
||||
meta: { title: '基础表格' }
|
||||
},
|
||||
{
|
||||
path: '/tabs',
|
||||
component: resolve => require(['../components/page/Tabs.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "tabs" */ '../components/page/Tabs.vue'),
|
||||
meta: { title: 'tab选项卡' }
|
||||
},
|
||||
{
|
||||
path: '/form',
|
||||
component: resolve => require(['../components/page/BaseForm.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "form" */ '../components/page/BaseForm.vue'),
|
||||
meta: { title: '基本表单' }
|
||||
},
|
||||
{
|
||||
// 富文本编辑器组件
|
||||
path: '/editor',
|
||||
component: resolve => require(['../components/page/VueEditor.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "editor" */ '../components/page/VueEditor.vue'),
|
||||
meta: { title: '富文本编辑器' }
|
||||
},
|
||||
{
|
||||
// markdown组件
|
||||
path: '/markdown',
|
||||
component: resolve => require(['../components/page/Markdown.vue'], resolve),
|
||||
meta: { title: 'markdown编辑器' }
|
||||
component: () => import(/* webpackChunkName: "markdown" */ '../components/page/Markdown.vue'),
|
||||
meta: { title: 'markdown编辑器' }
|
||||
},
|
||||
{
|
||||
// 图片上传组件
|
||||
path: '/upload',
|
||||
component: resolve => require(['../components/page/Upload.vue'], resolve),
|
||||
meta: { title: '文件上传' }
|
||||
component: () => import(/* webpackChunkName: "upload" */ '../components/page/Upload.vue'),
|
||||
meta: { title: '文件上传' }
|
||||
},
|
||||
{
|
||||
// vue-schart组件
|
||||
path: '/charts',
|
||||
component: resolve => require(['../components/page/BaseCharts.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "chart" */ '../components/page/BaseCharts.vue'),
|
||||
meta: { title: 'schart图表' }
|
||||
},
|
||||
{
|
||||
// 拖拽列表组件
|
||||
path: '/drag',
|
||||
component: resolve => require(['../components/page/DragList.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "drag" */ '../components/page/DragList.vue'),
|
||||
meta: { title: '拖拽列表' }
|
||||
},
|
||||
{
|
||||
// 拖拽Dialog组件
|
||||
path: '/dialog',
|
||||
component: resolve => require(['../components/page/DragDialog.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "dragdialog" */ '../components/page/DragDialog.vue'),
|
||||
meta: { title: '拖拽弹框' }
|
||||
},
|
||||
{
|
||||
// 国际化组件
|
||||
path: '/i18n',
|
||||
component: resolve => require(['../components/page/I18n.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "i18n" */ '../components/page/I18n.vue'),
|
||||
meta: { title: '国际化' }
|
||||
},
|
||||
{
|
||||
// 权限页面
|
||||
path: '/permission',
|
||||
component: resolve => require(['../components/page/Permission.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "permission" */ '../components/page/Permission.vue'),
|
||||
meta: { title: '权限测试', permission: true }
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
component: resolve => require(['../components/page/404.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "404" */ '../components/page/404.vue'),
|
||||
meta: { title: '404' }
|
||||
},
|
||||
{
|
||||
path: '/403',
|
||||
component: resolve => require(['../components/page/403.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "403" */ '../components/page/403.vue'),
|
||||
meta: { title: '403' }
|
||||
},
|
||||
{
|
||||
path: '/donate',
|
||||
component: resolve => require(['../components/page/Donate.vue'], resolve),
|
||||
component: () => import(/* webpackChunkName: "donate" */ '../components/page/Donate.vue'),
|
||||
meta: { title: '支持作者' }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
component: resolve => require(['../components/page/Login.vue'], resolve)
|
||||
component: () => import(/* webpackChunkName: "login" */ '../components/page/Login.vue')
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/404'
|
||||
}
|
||||
]
|
||||
})
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue