xlong admin element Download - xlong admin element Source code download

xlong admin element

Other categories

1.0.0

Download

xlong-admin-element

Important notice! ! !

After turning on the 2FA setting for my account on Github, I lost the recovery code for some reason and the account was unable to log in. In the future, all projects under this account will no longer be updated on Github. If you want to view continuously updated projects, please go to my code cloud. storehouse

introduce

xlong-admin-element is a set of single-page client-side rendering management background system examples developed based on Vue + Element + Mock.

Kind tips:

The original version developed with Bmob used the development version package (Bomb has stopped free services for development version applications that have been created for more than 12 months starting from May 5, 2022). Because I am poor and don’t want to recharge, I don’t plan to continue to maintain it. .
Bmob version portal: develop-vite-bmob

*This project is for learning reference only, please do not use it for commercial purposes.

Project display

DEMO address: https://xlong1029.github.io/xlong-admin-element/#/Login

Technologies, frameworks and plug-ins used in the project

Vue.js
webpack
Element
vue-element-admin
ECharts
Mock

Screenshots of some projects running

Login interface

Image text

Component display

Image text

Account management

Image text

Monitor large screen

Image text

Directory structure

 │  .editorconfig
│  .env.development // 开发环境配置
│  .env.production // 生产环境配置
│  .env.release // release正式库环境配置
│  .env.staging // stage正式库环境配置
│  .eslintignore
│  .eslintrc.js
│  .gitignore
│  .travis.yml
│  babel.config.js // babel配置
│  jest.config.js
│  jsconfig.json
│  package.json
│  postcss.config.js // CSS转换配置
│  vue.config.js // 配置文件
│  README.md
│
├─pubilc
│   favicon.ico // 图标
│   index.html // 首页入口文件
│
├─src
│  │  main.js // 项目入口js
│  │  permission.js // 角色权限配置
│  │  App.vue // 根组件
│  │
│  ├─assets // 资源目录，这里的资源会被wabpack构建
│  ├─api // api接口文件
│  ├─store  // 应用级数据（state）
│  ├─styles  // 样式
│  │
│  ├─mock // 模拟请求数据
│  │    index.js // mock数据
│  │    mock-handle.js // mock数据处理
│  │    mock-server.js // mock服务
│  │
│  ├─filters // 过滤器
│  │    index.js
│  │
│  ├─config // 项目配置
│  │    index.js
│  │
│  ├─components // 功能组件
│  │  │
│  │  ├─common // 通用组件
│  │  └─statistics-screen // 监控大屏相关组件
│  │
│  ├─layout // 布局
│  │  │
│  │  │  
│  │  ├─ default // 基础布局
│  │  │   │  index.vue
│  │  │   │
│  │  │   └─components // 布局组件
│  │  │      │  index.js
│  │  │      │  
│  │  │      ├─AppFooter // 底部
│  │  │      ├─AppMain // 主页面
│  │  │      ├─Breadcrumb // 面包屑
│  │  │      └─Navbar // 导航
│  │  │
│  │  └─ fullscreen // 全屏布局
│  │
│  ├─views // 视图
│  │  │
│  │  ├─account-manage // 账户管理
│  │  ├─change-password // 修改密码
│  │  ├─components // 组件展示相关
│  │  ├─error-page // 错误页面
│  │  ├─home // 主页
│  │  ├─login // 登录
│  │  ├─redirect // 重定向
│  │  └─statistics-screen // 监控大屏
│  │
│  ├─mixins // 混合模块
│  │  │  date-range-picker.js // 日期范围选择配置
│  │  │  response.js // 响应式配置
│  │  │  page.js // 页码配置
│  │  │  table.js // 表格相关操作
│  │  │  upload.js // 上传图片
│  │  │
│  │  └─chart
│  │
│  ├─utils // 通用工具函数
│  │    index.js
│  │    auth.js // 读写token
│  │    get-page-title.js // 页面标题
│  │    request.js // 请求配置
│  │    scroll-to.js // 页面滚动
│  │    validate.js // 验证
│  │
│  └─router  // 路由配置
│     │  index.js
│     │  
│     └─modules // 分模块的动态路由
│
├─static // 静态资源
│
└─tests // 单元测试文件