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项目。

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