AdminAir

AdminAir

Project introduction

AdminAir backend management system universal version 1.0

This project is built based on vue+Element. The page basically includes the add, delete, modify and check pages for regular operations, permission management and login pages. The homepage display class includes regular components: header name and quantity display component, article list top display component, and progress bar component. , table display components, timeline components, calendar components, lock screen components, chart components: line charts, bar charts, pie charts, rose charts, etc.; The data visualization page is currently in H5 mode, and the components are actually being built. The relevant components for the large screen page will be updated in version 2.0.

• If you are interested in this project, you can click "Star" to support it!

• Or you can "follow" and if you have any questions, please submit them directly in Issues

• Portal: Demo click here

---

The product depends on:

• Vue
• Vue CLi
• Vue Router
• Element
• Echarts
• Core-js
• VueCountTo
• Nprogress

Project operation

 # 克隆到本地
git https://github.com/liu-ziting/AdminAir.git
svn svn+ssh://[email protected]/liuziting/AdminAirElUI

# 进入文件夹
cd AdminAirElUI

# 安装依赖
npm install 

# 开启本地服务器localhost:8088
npm run dev

# 发布环境
npm run build

Project directory structure

 adminAirELUI
│  babel.config.js
│  package-lock.json
│  package.json			
│  README.md
│  vue.config.js
│  
├─public
│      favicon.ico
│      index.html
│      
└─src
    │  App.vue				跟组件
    │  loading.js			加载中动画封装
    │  main.js				入口js文件
    │  route.js				路由
    │  
    ├─assets				资源目录，这里的资源会被wabpack构建
    │      logo.png
    │      no.png
    │      
    └─components			公共组件目录
        │  Addnews.vue			文章管理-文章添加-->>(添加组件可用于各类表单提交功能页面)
        │  Category.vue			文章管理-类别添加-->>(列表,搜索，弹窗添加基本内容功能组件)
        │  Edit.vue				
        │  Home.vue			后台主页-->>(继承各类展示类组件的调用，具体组件查看HomeAssembly)
        │  Login.vue			登陆页面
        │  Main.vue			框架主体-->>(包含头部，左侧导航，底部和中间路由模块)
        │  NewList.vue			文章管理-新闻列表-->>(可用于列表展示搜索查询等功能组件)
        │  Role.vue			权限管理-角色管理
        │  User.vue			权限管理-用户管理-->>(左侧树导航右侧表格类组件)
        │  Welcome.vue			欢迎页面-->>(用于当主页没什么内容可直接用欢迎页面作为主页)
        │  UserCenter.vue			我的设置-个人中心
        │  
        ├─Add				添加类组件目录
        │      addadmin.vue		权限管理-用户管理-管理员添加（用于弹窗表单提交的组件）
        │      addrole.vue		权限管理-用户管理-角色添加（用于弹窗表单提交的组件）
        │      password.vue		我的设置-个人中心-修改密码（用于弹窗表单提交的组件）
        ├─Datav				数据可视化页面目录
        │      BigScreen.vue		数据可视化主页
        │      
        ├─Echarts			图表组件目录
        │      bar.vue			折线图
        │      line.vue			双柱状图
        │      rose.vue			南丁格尔玫瑰图
        │      
        └─HomeAssembly			主页展示类组件目录
                Calendar.vue		日历
                Carousel.vue		轮播图
                Empty.vue		暂无数据
                ListCrad.vue		列表类的模块
                Progress.vue		进度条集合
                Table.vue		表格
                Timeline.vue		时间戳
                TopNum.vue		统计类
                LockScreen.vue		锁屏组件

Screenshot of project part

Large screen page template