一个基于Vue+Element的通用后台管理系统
发布于 4 年前 作者 Wluyao 4503 次浏览 最后一次编辑是 4 年前 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

项目简介

基于Vue+Element的通用后台管理系统。提供了一些典型的中后台业务功能。

技术依赖

  • 主体:Vue、ElementUI、webpack
  • 图表:Antv/G2
  • Excel:js-xlsx
  • pdf:pdf.js
  • 图片生成:html2canvas
  • 富文本编辑器:Tinymce
  • 数据:axios、Mock
  • 地图:高德

项目地址

功能

  • 登录/退出
  • 全屏浏览
  • 一键换肤
  • 系统风格
  • 元素大小
  • 个人中心
  • 侧边菜单
  • 标签导航
  • 图表
    • 折线图
    • 面积图
    • 柱状图
    • 条形图
    • 饼图
    • 散点图
  • 表单
    • 基础表单
    • 步骤表单
    • 动态表单
  • 表格
  • Tab 选项卡
  • 权限控制
  • 用户管理
  • 文章管理
    • 创建文章
    • 文章列表
  • pdf
  • office-online
  • 上传
    • 头像上传
    • 文件上传
  • 错误处理
    • 403
    • 404
  • 其他功能
    • 返回顶部
    • 滚动条
    • 打印
    • html2canvas
    • 拖拽 Dialog
    • SVG 图标
    • 地图
    • 导入/导出 excel
    • 快捷复制
    • 文本溢出

目录结构

|-- config              webpack配置文件
|-- dist                webpack构建目录
|-- docs                文档
|-- public              html模板
|-- src                 源码目录
|	|-- api                   接口
|	|-- assets                静态资源文件,会被webpack解析为模块依赖
|		|-- img                     图片
|		|-- fonts                   字体
|	|-- components            全局公共组件
|	|-- directive             全局公共指令
|	|-- layouts               基础布局
|	|-- mock                  数据模拟
|	|-- pages                 页面级组件
|	|-- router                路由管理
|	|-- store                 状态管理
|	|-- utils                 全局公用方法
|	|-- App.vue               根组件
|	|-- main.js               入口文件,加载各种组件
|-- static              第三方纯静态资源,不会被webpack处理
|-- .babelrc            babel-loader 配置
|-- .editorconfig       IDE配置
|-- .gitignore          git提交时忽略的文件
|--	package.json        项目基本信息
|-- README.md           项目说明

项目截图

使用

运行

npm run dev

构建

npm run build
回到顶部