基本概述

Admui 的追求的目标是做到开箱即用,无需了解框架内部机制,但是我们也深知一套框架不可能满足所有客户的所有需求,所以我们仍然为您准备了前端的开发文档,以满足部分客户的定制需求,我们会不断的完善这部分的文档,请及时关注。

依赖关系

Admui 依赖于两个主要框架(库)。源码包中已经包含这两个框架(库),无需再手动下载:

从 v2 版本已经升级到 BootStrap 4 和 jQuery 3,如果您想使用 BootStrap 4,您可以从用户中心升级到 v2.x 或更高版本。现在升级

Admui 是基于 Pjax 的类单页项目。因此,我们需要后台来配合开发,以完成相应请求的响应操作,我们提供了一个简易的 Node 服务端,位于/server/文件夹下。

您只需要在/server/routers/index.js中为相应地址添加路由即可。

对于 Pjax 请求和地址栏请求我们会通过请求头来区分,进行不同的响应操作。例如:

router.get('/', function (req, res) {
if (req.headers['x-pjax']) {
// 响应pjax请求
res.render('examples/home.html');
} else {
// 响应地址栏请求
res.render('index', {path: 'examples/home.html'});
}
});

如果您购买了后端源码,您也可以参考后端源码中关于处理 Pjax 请求的代码。

包含内容

Admui 提供了自动构建和基础源码两种不同的版本。

自动构建

如果您购买源码时选择的前端源码是自动构建,下载源码解压后,大体源码结构如下:

Admui/
├── server/ (node服务)
│ ├── bin/
│ ├── routers/ (路由管理)
│ └── app.js
├── src/
│ ├── assets/ (静态资源)
│ ├── data/ (模拟数据)
│ ├── images/ (图片)
│ ├── js/
│ └── less/
│ ├── fonts/ (字体图标)
│ ├── gulp/ (gulp任务配置)
│ ├── configuration/ (配置信息&公共方法)
│ └── tasks/ (任务)
│ ├── pages/ (页面)
│ ├── themes/ (主题)
│ ├── classic/ (主题)
│ ├── base/ (布局)
│ └── global/
│ ├── vendor/ (插件)
│ └── .csscomb.json
├── package.json
├── gulpfile.js
├── .jshintrc(jshint配置)
├── README.md
├── .gitignore
└── LICENSE

对于包含自动构建部分的前端源码,可以通过我们提供的 开发工具 来开发和调试项目,也可以通过命令行来开发和调试,请参考 构建工具

基础源码

如果您购买源码时选择的前端源码是基础源码,下载源码解压后,大体源码结构如下:

Admui/
├── server/ (node服务)
│ ├── bin/
│ ├── routers/ (路由管理)
│ └── app.js
├── public/
│ ├── data/ (模拟数据)
│ ├── images/ (图片)
│ ├── js/
│ └── less/
│ ├── fonts/ (字体图标)
│ ├── themes/ (主题)
│ ├── classic/(主题)
│ ├── base/ (布局)
│ └── global/
│ └── vendor/ (插件)
├── views/ (页面)
├── package.json
├── .jshintrc(jshint配置)
├── README.md
├── .gitignore
└── LICENSE

运行项目

安装 node.js

首先,您必须下载和安装 node.js(包含npm),npm 是 node 的包管理工具。您可以使用node --versionnpm --version来检查是否已经安装 node 和 npm。如果您已经安装了 node.js,请忽略此步骤。

您可以从这里下载Node.js.

自动构建

安装依赖包: npm install

启动项目: npm run [dev | build]
// 1. dev: 运行开发环境,提供浏览器自动刷新、增量编译、未压缩静态文件等;
// 2. build: 部署生产环境,合并压缩、替换路径、添加版本号等。

更多 Gulp 编译命令请阅读gulpfile.js,您可以在gulp/configuration/config.jsgulp/configuration/config.json中更改配置信息,通过 gulp 构建项目到指定的目录中。

基础源码

安装依赖包: npm install

启动项目: npm start

Note: 您也可以通过 IDE 的 node 配置启动项目。

如果您希望定制主题或通过 Gulp 自动构建项目,您可以通过在线升级的方式购买自动构建部分。升级

浏览器支持

Admui可以很好的支持最新版的PC浏览器和智能设备浏览器,支持的浏览器如下:

浏览器 Windows MacOS(10.9+) IOS(7.1.2+) Android(4.1+)
IE 6-9 X N/A N/A N/A
IE 10 A- N/A N/A N/A
IE 11 A N/A N/A N/A
Edge A N/A N/A N/A
Chrome(谷歌) A A A A
Firefox(火狐) A A N/A -
Safari - A A N/A
360极速浏览器 A N/A - -
搜狗浏览器 A N/A - -
QQ浏览器 A N/A - -
百度浏览器 A N/A - -
猎豹浏览器 A N/A - -
微信浏览器 N/A N/A A A
钉钉浏览器 N/A N/A A A

Notes:X:不支持;A:支持最好;B:支持一般;C:支持糟糕;-:未测试;N/A:不存在。

更多信息请访问 BootStrap中文文档