一个精致的企业中后台前端框架 D2Admin

D2Admin 是一个完全开源免费的企业中后台产品前端集成方案，使用最新的前端技术栈，小于 60kb 的本地首屏 js 加载，已经做好大部分项目前期准备工作，并且带有大量示例代码，助力管理系统敏捷开发。

功能

使用 vue-cli3 构建
首屏加载等待动画
五款主题
内置 UEditor 富文本编辑器
详细的文档
登录和注销
分离的路由和菜单设置
可折叠侧边栏
多国语
富文本编辑器
Markdown 编辑器
全屏
Fontawesome 图标库
图标选择器
自动注册 SVG 图标
模拟数据
剪贴板封装
图表库
时间日期计算工具
导入 Excel （ xlsx + csv ）
数据导出 Excel （ xlsx + csv ）
数据导出文本
数字动画
可拖拽调整大小的区块布局
可拖拽调整大小和位置的网格布局
开箱即用的页面布局组件
加载并解析 markdown 文件
GitHub 样式的 markdown 显示组件
markdown 内代码高亮
为 markdown 扩展了百度云链接解析和优化显示
右键菜单组件
自定义滚动条和滚动控制
公用样式抽离，方便的主题定制
支持临时菜单配置
系统功能展示模块 1.1.4 +
多标签页模式 1.1.4 +
美化滚动条 1.1.4 +
json view 1.1.4 +
cookie 封装 1.1.5 +
多标签页全局控制 API 1.1.5 +
菜单全局控制 API 1.1.5 +
多标签页关闭控制支持右键菜单 1.1.10 +
模块化全局状态管理 1.2.0 +
多种数据持久化方式：区分用户，区分路由，页面数据快照功能 1.2.0 +
支持跳出外部链接的菜单系统 1.2.0 +
支持菜单 svg 图标 1.3.0 +
日志记录和错误捕捉 1.3.0 +
全局菜单搜索 1.3.0 +
自定义登录重定向 1.3.0 +
切换全局基础组件尺寸 1.4.0 +
页面载入进度条 1.4.1 +
自适应的顶部菜单栏 1.4.7 +
数据导出 xslx 时支持合并单元格 1.5.4 +
多标签页支持拖拽排序 1.8.0 +
优化生产环境构建，首页只加载小于 60kb 的本地 js 代码 1.8.0 +
内置了构建文件体积检查工具 1.8.0 +

快速上手

下载项目

完整版仓库

https://github.com/d2-projects/d2-admin

或者

https://gitee.com/d2-projects/d2-admin

简化版起始模板

https://github.com/d2-projects/d2-admin-start-kit

或者

https://gitee.com/d2-projects/d2-admin-start-kit

下载完成后会得到这些资源（以 1.1.5 版本为例）：

安装依赖

将终端切换到项目目录之后安装依赖：

npm i

开发调试

在项目目录内启动项目：

npm run dev

或者

npm start

也可以使用 cli3 新推荐的命令：

npm run serve

以上每种方式效果都是一样的，只是为了照顾不同人的习惯起了三个名字，实质上都是运行了 vue-cli-service serve --open。

成功运行后会显示登录界面：

新建页面

src/pages 目录是页面存放目录，在此目录下新建目录，例如 page-demo：然后在文件夹内新建 index.vue 文件：

<template>
  <d2-container>
    <template slot="header">header</template>
    Hello World
    <template slot="footer">footer</template>
  </d2-container>
</template>

上面的代码生成了一个带有 header 和 footer 的页面，页面内容只有一句话，如果好奇为什么这么写，可以参考页面容器。

效果

传送门

开源协议：MIT

开源地址：https://github.com/d2-projects/d2-admin

项目合集：https://github.com/OpenTechCol/OpenTechCol

「回复【加群】加入开源技术交流群，干货很多！」

-END-

原文始发于微信公众号（开源技术专栏）：一个精致的企业中后台前端框架 D2Admin

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/155413.html