Ace Admin安装配置教程

不念不忘少年蓝@ 2022-05-13 01:16 249阅读 0赞

![70][]

--------------------

**一、下载Ace Admin**

1、进入Ace Admin官方地址[http://ace.jeka.by/][http_ace.jeka.by]后，点击上图所示的超链接进入下载Ace Admin页面，下载页面如下图；

![70 1][]

2、按照上图所示的标注下载Ace Admin框架文件：ace-master.zip，下载后解压文件目录如下：

![70 2][]

**二、测试安装Ace Admin**

1、创建index.html文件，并将下载文件中的文件夹：assets放在同一目录：

![70 3][]

2、在index.html中引入css和js；

要引入的css与js可在解压文件下的任何html文件中复制粘贴，非常方便。用于测试的index.html代码如下：

<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />
    <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    <link rel="stylesheet" href="assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
    <script src="assets/js/ace-extra.min.js"></script>
    <title>Insert title here</title>
    </head>
    <body>
    	<button class="btn btn-app btn-danger btn-sm">
    		<i class="ace-icon fa fa-trash-o bigger-200"></i> 删除
    	</button>
    </body>
    </html>

在index.html中创建了一个删除按钮，使用火狐浏览器打开index.html文件即可查看效果。

![70 4][]

至此，ace admin配置完毕。

[70]: /images/20220513/9309a2ac352d4f9a8924dc47c0a6258a.png
[http_ace.jeka.by]: http://ace.jeka.by/
[70 1]: /images/20220513/aa103922179f4064a7e29026f3324d8a.png
[70 2]: /images/20220513/0071e850b5f74139847f48e27f96950a.png
[70 3]: /images/20220513/3040a078e2dd405084c70bc82d5ed77d.png
[70 4]: /images/20220513/4f90fbdce35341c29d3e5de3c4c736b2.png