# 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 的后台管理系统解决方案。
## 项目截图
### 登录
![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/wms2.png)
## 前言
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统(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)
没有合适的资源?快使用搜索试试~ 我知道了~
vue+springboot前后端分离的汽车配件销售系统
共361个文件
xml:180个
java:52个
class:51个
需积分: 5 1 下载量 65 浏览量
2023-06-25
14:24:58
上传
评论
收藏 736KB ZIP 举报
温馨提示
技术框架:前端vue,后端springboot,数据库Mysql 主要功能:登录,注册,用户管理,分类管理,配件管理,商家管理,入库管理,出库管理,销售管理,财务管理,统计管理,代码逻辑清晰,运行没有问题的,有问题可以看我主页联系我
资源推荐
资源详情
资源评论
收起资源包目录
vue+springboot前后端分离的汽车配件销售系统 (361个子文件)
.browserslistrc 33B
Enter.class 8KB
Sell.class 8KB
SellServiceImpl.class 7KB
SellController.class 6KB
Sort.class 6KB
User.class 6KB
Part.class 5KB
Account.class 5KB
Psw.class 5KB
TimeUtil.class 4KB
Store.class 4KB
UserController.class 4KB
UserServiceImpl.class 4KB
OssController.class 4KB
EnterServiceImpl.class 4KB
Shop.class 4KB
PartController.class 3KB
StoreServiceImpl.class 3KB
ShopServiceImpl.class 3KB
AccountController.class 3KB
AccountServiceImpl.class 3KB
StoreController.class 3KB
EnterController.class 3KB
Result.class 3KB
SortServiceImpl.class 3KB
SortController.class 3KB
ShopController.class 3KB
PartServiceImpl.class 3KB
CorsFilter.class 2KB
PageResult.class 2KB
Echart.class 2KB
ResourceConfigurerAdapter.class 1KB
ResultUtil.class 1KB
SellService.class 1KB
UserService.class 1011B
AccountService.class 927B
EnterService.class 901B
StoreService.class 901B
ShopService.class 888B
SortService.class 888B
PartService.class 888B
CommonApplication.class 827B
SellMapper.class 702B
EnterMapper.class 589B
PartMapper.class 582B
CommonApplicationTests.class 535B
AccountMapper.class 390B
StoreMapper.class 384B
ShopMapper.class 381B
SortMapper.class 381B
UserMapper.class 381B
mvnw.cmd 6KB
index.css 228KB
main.css 3KB
color-green.css 701B
color-dark.css 448B
icon.css 103B
.gitignore 395B
.gitignore 238B
.gitignore 184B
index.html 874B
common.iml 17KB
book-vue.iml 288B
maven-wrapper.jar 50KB
TimeUtil.java 5KB
MavenWrapperDownloader.java 5KB
SellController.java 5KB
SellServiceImpl.java 5KB
OssController.java 3KB
UserController.java 3KB
AccountController.java 3KB
EnterController.java 3KB
StoreController.java 3KB
PartController.java 3KB
SortController.java 3KB
ShopController.java 3KB
Psw.java 2KB
UserServiceImpl.java 2KB
EnterServiceImpl.java 2KB
ShopServiceImpl.java 2KB
StoreServiceImpl.java 2KB
AccountServiceImpl.java 2KB
CorsFilter.java 2KB
SortServiceImpl.java 2KB
Enter.java 2KB
PartServiceImpl.java 2KB
Sell.java 2KB
Store.java 1KB
PageResult.java 1KB
Account.java 1KB
Part.java 1KB
Sort.java 1KB
User.java 1KB
Shop.java 970B
ResultUtil.java 810B
ResourceConfigurerAdapter.java 773B
SellService.java 677B
UserService.java 619B
AccountService.java 612B
共 361 条
- 1
- 2
- 3
- 4
资源评论
accacx
- 粉丝: 0
- 资源: 4
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功