# vue-manage-system
<a href="https://github.com/vuejs/vue">
<img src="https://img.shields.io/badge/vue-3.1.2-brightgreen.svg" alt="vue">
</a>
<a href="https://github.com/vuejs/pinia">
<img src="https://img.shields.io/badge/pinia-2.0.14-brightgreen.svg" alt="pinia">
</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>
基于 Vue3 + pinia + Element Plus 的后台管理系统解决方案。[线上地址](https://lin-xin.gitee.io/example/work/)
> Vue2 版本请看 [tag-V4.2.0](https://github.com/lin-xin/vue-manage-system/tree/V4.2.0)
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
## 赞助商
### 好问
[<img src="https://static.bestqa.net/logo/bestqa_haowen.png" width="220" height="100">](https://www.bestqa.net/home/index.html)
专业问卷服务,一对一客服,按需定制
## 支持作者
请作者喝杯咖啡吧!(微信号:linxin_20)
![微信扫一扫](https://lin-xin.gitee.io/images/weixin.jpg)
## 前言
该方案作为一套多功能的后台框架模板,适用于绝大部分的后台管理系统开发。基于 Vue3 + pinia + typescript,引用 Element Plus 组件库,方便开发。实现逻辑简单,适合外包项目,快速交付。
## 功能
- [x] Element Plus
- [x] vite 3
- [x] pinia
- [x] typescript
- [x] 登录/注销
- [x] Dashboard
- [x] 表格
- [x] Tab 选项卡
- [x] 表单
- [x] 图表 :bar_chart:
- [x] 富文本/markdown编辑器
- [x] 图片拖拽/裁剪上传
- [x] 权限管理
- [x] 三级菜单
- [x] 自定义图标
## 安装步骤
> 因为使用vite3,node版本需要 14.18+
```
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
cd vue-manage-system // 进入模板目录
npm install // 安装项目依赖,等待安装完成之后,安装失败可用 cnpm 或 yarn
// 运行
npm run dev
// 执行构建命令,生成的dist文件夹放在服务器下即可访问
npm run build
```
## 组件使用说明与演示
### vue-schart
vue.js 封装 sChart.js 的图表组件。访问地址:[vue-schart](https://github.com/lin-xin/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 setup lang="ts">
import { ref } from 'vue';
import Schart from "vue-schart"; // 导入Schart组件
const options = ref({
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],
},
],
})
</script>
<style>
.wrapper {
width: 7rem;
height: 5rem;
}
</style>
```
## 项目截图
### 登录
![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)
## License
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
收起资源包目录
vue-manage-system-master.zip (52个子文件)
vue-manage-system-master
screenshots
wms3.png 112KB
wms1.png 23KB
components.d.ts 3KB
tsconfig.node.json 184B
auto-imports.d.ts 69B
.github
FUNDING.yml 682B
src
main.ts 768B
App.vue 341B
store
tags.ts 1KB
sidebar.ts 242B
permiss.ts 534B
assets
img
login-bg.jpg 69KB
img.jpg 6KB
css
color-dark.css 359B
main.css 2KB
icon.css 91B
api
index.ts 157B
utils
request.ts 688B
components
sidebar.vue 5KB
tags.vue 3KB
header.vue 3KB
router
index.ts 6KB
vite-env.d.ts 247B
views
permission.vue 2KB
export.vue 2KB
charts.vue 2KB
dashboard.vue 6KB
icon.vue 3KB
markdown.vue 652B
login.vue 3KB
403.vue 1KB
donate.vue 376B
tabs.vue 3KB
user.vue 4KB
upload.vue 1KB
404.vue 1KB
editor.vue 914B
import.vue 3KB
table.vue 5KB
form.vue 6KB
home.vue 757B
LICENSE 1KB
package.json 839B
README_EN.md 3KB
public
template.xlsx 10KB
table.json 1KB
package-lock.json 52KB
vite.config.ts 568B
index.html 653B
.gitignore 231B
tsconfig.json 474B
README.md 4KB
共 52 条
- 1
资源评论
gaga-gaga
- 粉丝: 0
- 资源: 22
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功