# 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>
<a href="https://github.com/ElemeFE/element">
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
</a>
<a href="https://github.com/lin-xin/vue-manage-system/releases">
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
</a>
<a href="https://lin-xin.gitee.io/example/work/#/donate">
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
</a>
基于 Vue + Element UI 的后台管理系统解决方案。
## 项目截图
### 登录
### 默认皮肤
### 浅绿色皮肤
## 前言
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统（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](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="myCanvas" :options="options"></schart>
</div>
</template>
<script>
import Schart from 'vue-schart'; // 导入Schart组件
export default {
data() {
return {
options: {
type: 'bar',
title: {
text: '最近一周各品类销售图'
},
labels: ['周一', '周二', '周三', '周四', '周五'],
datasets: [
{
label: '家电',
data: [234, 278, 270, 190, 230]
},
{
label: '百货',
data: [164, 178, 190, 135, 160]
},
{
label: '食品',
data: [144, 198, 150, 235, 120]
}
]
}
};
},
components: {
Schart
}
};
</script>
<style>
.wrapper {
width: 7rem;
height: 5rem;
}
</style>
```
## 其他注意事项
### 一、如果我不想用到上面的某些组件呢，那我怎么在模板中删除掉不影响到其他功能呢？
举个栗子，我不想用 Vue-Quill-Editor 这个组件，那我需要分四步走。
第一步：删除该组件的路由，在目录 src/router/index.js 中，找到引入改组件的路由，删除下面这段代码。
```JavaScript
```
第二步：删除引入该组件的文件。在目录 src/components/page/ 删除 VueEditor.vue 文件。
第三步：删除该页面的入口。在目录 src/components/common/Sidebar.vue 中，找到该入口，删除下面这段代码。
第四步：卸载该组件。执行以下命令：
npm un vue-quill-editor -S
完成。
### 二、如何切换主题色呢？
第一步：打开 src/main.js 文件，找到引入 element 样式的地方，换成浅绿色主题。
```javascript
import 'element-ui/lib/theme-default/index.css'; // 默认主题
// import './assets/css/theme-green/index.css'; // 浅绿色主题
```
第二步：打开 src/App.vue 文件，找到 style 标签引入样式的地方，切换成浅绿色主题。
```javascript
@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)
Springboot+Vue购物+疫情系统
需积分: 42 77 浏览量
2022-10-08
23:00:48
上传
评论
收藏 59.99MB ZIP 举报
Springboot+Vue购物+疫情系统 （512个子文件） 
.browserslistrc 33B Product.class 10KB PayController.class 9KB AliReturnPay.class 7KB Order.class 7KB User.class 7KB CarServiceImpl.class 6KB Comment.class 6KB Notice.class 6KB CommentTree.class 6KB Visitor.class 5KB Document.class 5KB ProductServiceImpl.class 5KB Psw.class 5KB OrderVo.class 5KB Info.class 4KB ProductController.class 4KB CommentServiceImpl.class 4KB CarVo.class 4KB Car.class 4KB CommentController.class 4KB CarController.class 4KB UserServiceImpl.class 4KB UserController.class 4KB OssController.class 4KB Result.class 3KB AddressController.class 3KB WebSocket.class 3KB InfoServiceImpl.class 3KB VisitorServiceImpl.class 3KB VisitorController.class 3KB NoticeController.class 3KB DocumentController.class 3KB OrderController.class 3KB SortServiceImpl.class 3KB SaticScheduleTask.class 3KB InfoController.class 3KB SortController.class 3KB Sort.class 3KB Address.class 3KB DocumentServiceImpl.class 3KB NoticeServiceImpl.class 3KB OrderServiceImpl.class 2KB SwaggerConfig.class 2KB CorsFilter.class 2KB PageResult.class 2KB CommentVo.class 2KB TimeUtil.class 2KB ResultUtil.class 1KB AliReturnPay$Action.class 1KB IProductService.class 1KB ICarService.class 1KB CommentService.class 914B MybatisPlusConfig.class 890B DocumentService.class 882B IUserService.class 880B VisitorService.class 859B NoticeService.class 848B ShopApplication.class 828B InfoService.class 826B IOrderService.class 724B AddressServiceImpl.class 705B ICommentService.class 703B ISortService.class 682B DocumentMapper.class 526B ProductMapper.class 525B CommentMapper.class 525B ShopApplicationTests.class 523B NoticeMapper.class 512B OrderMapper.class 505B CarMapper.class 491B IAddressService.class 322B AddressMapper.class 309B VisitorMapper.class 309B UserMapper.class 300B SortMapper.class 300B InfoMapper.class 300B mvnw.cmd 6KB index.css 228KB main.css 3KB color-green.css 701B color-dark.css 448B icon.css 103B
home_registgift.gif 36KB home_head_icon_qrcode.gif 3KB .gitignore 395B .gitignore 238B .gitignore 184B
index.html 634B mall.iml 18KB web-vue.iml 349B
maven-wrapper.jar 50KB PayController.java 8KB MavenWrapperDownloader.java 5KB CarServiceImpl.java 4KB CommentController.java 4KB ProductController.java 3KB OssController.java 3KB UserController.java 3KB CommentServiceImpl.java 3KB共 512 条
- 1
- 2
- 3
- 4
- 5
- 6
评论0