简单来说,AUI框架就是一个用于移动端开发的前端框架,能够为你的移动端开发节省很多时间,并且为你提供好看的样式和更好的用户体验。如果想要进AUI官网查看详细的介绍,请点这里。
作为一个前端程序员,会使用框架是必须的。框架让你的代码更简洁。下面来介绍一下AUI框架的使用过程。
第一步:下载AUI2.1
这是AUI框架的官网,首先我们需要点击下载AUI2.1按钮.下载的是一个压缩包,将解压后文件存放进你的项目里。如下图所示。
第二步:在项目中引用AUI
你需要在你的页面中引入AUI文件,代码如下:
<link rel="stylesheet" type="text/css" href="aui-20170109-v2.1/css/aui.css" />
<script type="text/javascript" src="aui-20170109-v2.1/script/api.js"></script>
只有在页面中加入这两行代码,(如果使用的样式不涉及到JS特效,可以只引用aui.css文件)。
第三步:正式使用AUI
就是正式使用AUI框架来完成你的项目。在此过程中需要查阅AUI2.0文档。在官网中也提供了AUI2.0文档的链接,在右上角的文档中点击2.x文档即可。该文档详细描述了各种样式的使用方法。在此处举个简单的例子。
<div class="aui-btn aui-btn-info aui-btn-block aui-btn-outlined">默认按钮(info)</div>
这样一行简单的代码,就可以定义出一个好看的按钮样式并且自带点击样式,效果如下图:
如果需要用到如弹出框,图片轮播等效果时,还要引入其对应的js文件。具体可以在官网提供的AUI2.0文档中查看并使用。