vue打造的轻量中后台管理系统

vue-system-admin

在线体验地址

仓库地址

开放的API文档

预览图

登录页

在这里插入图片描述

主面板

在这里插入图片描述

基本表格

在这里插入图片描述

基本表单

在这里插入图片描述

表单详情

在这里插入图片描述

markdown编辑器

在这里插入图片描述

文件上传

在这里插入图片描述

charts图标

在这里插入图片描述

说明

各位同行如果觉得这个项目还阔以的话,可以给我点个”☆“,三克油。

本项目会一直更新下去,一直开源。

原来一直是使用的是别人的Vue管理系统,可是又觉得与其用别人的东西,自己还不如花点时间和精力去开发一套自己的管理系统,并且切合着实际的项目经验去使用各个组件,这才有了vue-system-admin的诞生,小而精,小而全,才是我的初衷。而随着经验和场景的增加,也会不断的去使用更多好用的经验和技巧。本项目使用的数据都是静态数据,尚未发送请求获取数据。当前项目会写一个电子版的文档出来。当前本项目仅仅在登录的时候使用了真实的接口,不用担心,注意后面的小彩蛋哦。

技术栈

Vue2.6.11 + ElementUI2.13.2 + vue-router3.4.3 + echarts4.8.0 + v-charts1.19.0 + mavon-editor2.6.17

功能点

  • 登录
  • 基本表格
  • 基本表单
  • 表单详情
  • markdown编辑器
  • 文件上传
  • charts图表
  • 发送请求
  • axios封装
  • API封装
  • 未完待续

项目结构

.
├── public                                      // 公共文件夹
│   ├── favicon.ico                             // 网站头部的图标文件
│   ├── index.html                              // 程序入口HTML文件
├── screen                                      // README.md的图片文件
├── src                                         // 源码文件夹
│   ├── api                                     // API文件
│   ├── assets                                  // 资源文件夹
│   │   └── css                                 // css文件夹
│   │       └── main.css                        // 公共css文件
│   │   └── images                              // images文件夹
│   │       └── login_bg.jpg                    // 登录页面背景图
│   │       └── logo.png                        // logo
│   │   └── theme                               // 自定义主题文件夹
│   │       └── font                            // 主题字体文件夹
│   │       └── index.css                       // 主题css
│   ├── components                              // 自定义组件文件夹
│   │   └── common                              // 公共组件
│   │       └── commonHeader.vue                // 导航栏头部组件
│   │       └── commonSiderbar.vue              // 侧边栏组件
│   │       └── commonTags.vue                  // 标签卡组件
│   │   └── Home.vue                            // 组件合并(中心页)
│   ├── pages                                   // 所有页面文件夹
│   │   └── charts                              // 图表
│   │       └── index.vue
│   │   └── dashboard                           // 主面板
│   │       └── index.vue
│   │   └── form                                // 基本表单
│   │       └── index.vue
│   │   └── form-detail                         // 表单详情
│   │       └── index.vue
│   │   └── login                               // 登录
│   │       └── index.vue
│   │   └── markdown                            // markdown
│   │       └── index.vue
│   │   └── table                               // 基本表格
│   │       └── index.vue
│   │   └── upload                              // 上传
│   │       └── index.vue
│   ├── router                                  // 路由
│   │   └── index.js										
│   ├── service                                 // 业务处理
│   │   └── axios.js                            // axios封装										
│   │   └── bus.js                              // bus总线
│   ├── utils                                   // 工具
│   │   └── httpUtil.js                         // http请求封装		
│   ├── App.vue                                 // 页面入口文件
│   ├── main.js                                 // 程序入口文件,配置文件
├── .gitignore                                  // git忽略提交的文件
├── package.json                                // 项目依赖文件管理
├── README.md                                   // README.md
├── babel.config.js                             // babel配置文件
├── vue.config.js                               // 项目配置文件
.

克隆项目

git clone https://github.com/FTLLOVE/vue-system-admin.git

依赖安装

yarn install or npm install

编译启动项目

yarn serve or npm run serve

打包部署

yarn build or npm run build

小彩蛋

后面会有实战项目,一点一滴的编写一个项目。不仅仅有前端,还有后端,而后端会采用不同的语言,比如Java,PHP, NodeJS, Golang。当前前端也会有不同的项目,比如使用React打造的轻量简洁的中后台管理系统。使用NextJS,NuxtJS等技术开发不同技术栈的非SPA项目。

如果你觉得这就没了,那可能让你失望了,每个项目都会有配套的电子版的文档发布出来,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值