lxzliuxinzhu / d2admin-vue-element

an elegant backstage template build by vue

Home Page:http://d2admin.fairyever.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

基于 vue.jsElementUI 的管理系统前端解决方案

vue element-ui vuex axios

欢迎大家一起维护

线上预览地址 d2admin.fairyever.com

为了观看体验,预览截图放在最后

此项目适合作为模板使用。因为现在集成了很多的插件和组件,首次加载会占用较多的时间,虽然已经做了首屏加载动画,还是建议您在发布的时候一定要删除没有用到的代码。比如项目没有用到图表,最好将集成的图表库以及封装的图表组件删除。

功能

  • 首屏加载等待动画 避免首次加载白屏尴尬
  • 简约主题
  • 每个插件和组件都配有介绍文档
  • 图片资源 sketch 源文件( 可以在这个文件内重新生成所有图片资源 )
  • 登陆和注销
  • 根据路由自动生成菜单
  • 可折叠侧边栏
  • 多国语言支持
  • 富文本编辑器
  • Markdown 编辑器
  • 全屏功能
  • Fontawesome 图标库
  • Fontawesome 图标选择器(组件)
  • 自动引入下载的 SVG 图标
  • 前端假数据支持( mock )
  • 集成 G2 图表
  • 图表自适应可拖拽大小的卡片容器(示例)
  • 简化剪贴板操作
  • 简化Cookie操作
  • 时间计算工具
  • 导入 Excel ( xlsx 格式 + CSV 格式 )
  • 数据导出 Excel ( xlsx 格式 + CSV 格式 )
  • 数据导出文本
  • 数字动画
  • 可拖拽调整大小的切分布局
  • 可拖拽调整大小和位置的网格布局
  • 提供三种页面容器组件(正常卡片,隐形容器,填满页面)
  • 代码高亮显示
  • 加载并解析 markdown 文件
  • GitHub 样式的 markdown 显示组件
  • markdown 内代码高亮
  • 为 markdown 扩展了百度云链接解析和优化显示

目录结构

├─ build // 打包设置
├─ config // 发布设置
├─ preview-image // github 介绍页面使用的插图 以后可能去掉
├─ src
│  ├─ assets
│  │  ├─ icons // 存放 svg 图标
│  │  ├─ image // 图片
│  │  ├─ library // 库
│  │  └─ style // 公用样式
│  ├─ components
│  │  ├─ charts // 封装图表组件
│  │  ├─ core // 核心组件
│  │  ├─ demo // 只会在示例页面中使用的组件
│  ├─ i18n // 多国语言配置
│  ├─ mock // mock 数据设置
│  ├─ pages
│  │  ├─ core // 系统页面
│  │  └─ demo // 演示页面
│  │     ├─ business // 业务页面示例
│  │     ├─ chart // 图表
│  │     ├─ components // 组件
│  │     └─ plugins // 插件
│  ├─ plugin // 插件
│  ├─ router // 路由
│  │  ├─ invisible
│  │  └─ menu
│  ├─ store // 全局状态
│  ├─ utils // 通用工具
│  ├─ App.vue
│  └─ main.js // 入口文件
├─ static
├─ .babelrc
├─ .editorconfig
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ .postcssrc.js
├─ LICENSE
├─ README.md
├─ design.sketch
├─ index.html
├─ package-lock.json
└─ package.json

使用

安装依赖

npm i

运行

npm run dev

在以下环境测试可用

➜  ~ npm -v
5.6.0
➜  ~ node -v
v8.11.1
➜  ~ nrm -V
1.0.2
➜  ~ nrm ls
  npm ---- https://registry.npmjs.org/
  cnpm --- http://r.cnpmjs.org/
* taobao - https://registry.npm.taobao.org/
  nj ----- https://registry.nodejitsu.com/
  rednpm - http://registry.mirror.cqupt.edu.cn/
  npmMirror  https://skimdb.npmjs.com/registry/
  edunpm - http://registry.enpmjs.org/

不建议使用 cnpm

预览

登陆

Snip20180526_1

主界面

Snip20180526_2

模拟数据

Snip20180526_3

可拖拽卡片

Snip20180526_4

可拖拽调节的布局

Snip20180526_5

多国语言支持

Snip20180526_6

封装导入 csv xlsx 封装导出 csv xlsx 以及纯文本

Snip20180526_7

Snip20180526_8

四种页面容器组件

Snip20180526_9

集成富文本编辑器

Snip20180526_10

集成 markdown 编辑器

Snip20180526_11

集成图标库

Snip20180526_12

封装图标组件

Snip20180526_13

支持自动导入文件夹下的 svg 图标,并通过组件使用

Snip20180526_14

图标选择器组件

Snip20180526_15

集成 markdown 渲染功能 并且优化了百度云分享链接在渲染结果的显示

Snip20180526_16

集成数字动画插件

Snip20180526_17

代码高亮显示

Snip20180526_18

集成图表

Snip20180526_19

支持图表拖拽调整大小,以及拖放位置

Snip20180526_20

单独图表示例

Snip20180526_21

About

an elegant backstage template build by vue

http://d2admin.fairyever.com/

License:MIT License


Languages

Language:CSS 51.2%Language:JavaScript 26.5%Language:Vue 21.5%Language:HTML 0.8%