需要預(yù)先說(shuō)明的一點(diǎn)是量窘，不管是EasyUI也好弯囊，Bootstrap也罷，都可以認(rèn)為是在CSS诱渤、Javascript丐巫、jQuery上再封裝了一層。
EasyUI前端框架其實(shí)也就是別人封裝好了CSS和JS代碼勺美，我們直接用就行了鞋吉。就像我們可以通過(guò)添加jar包的方式引入一些Java類一樣，我們可以通過(guò)<link>和<script>標(biāo)簽励烦，在網(wǎng)頁(yè)中添加對(duì)CSS和JS庫(kù)的引用谓着。具體過(guò)程如下：
第一步，首先是下載坛掠，登錄下載官網(wǎng)：EasyUI下載赊锚，點(diǎn)擊Freeware Edition下面的Download下載即可（貓哥下載的是1.5.1版本，以此版本為準(zhǔn)進(jìn)行演示屉栓，說(shuō)實(shí)話我也沒(méi)用過(guò)1.5.1舷蒲，之前用的還是老版本的，不過(guò)程序員要一直更新自己的知識(shí)庫(kù)友多，千萬(wàn)不要執(zhí)著于熟悉的舊版牲平，要爭(zhēng)當(dāng)時(shí)代的弄潮兒，哈哈哈）域滥。
第二步纵柿，解壓后蜈抓，新建文件夾easyui，將壓縮包在easyui文件夾下解壓昂儒。哈哈沟使，如果直接解壓出來(lái)一大堆東西，就有點(diǎn)亂了渊跋。
第三步腊嗡，分析下解壓出來(lái)的東西，分析如下：
demo：肯定是放案例的了拾酝，有些同學(xué)習(xí)慣于百度找博客燕少，其實(shí)案例才是經(jīng)典
demo-mobile：估計(jì)是放手機(jī)端的案例，這個(gè)牛X啊蒿囤，看來(lái)easyui可以用于手機(jī)端棺亭，看來(lái)本系列之后要單開(kāi)一個(gè)手機(jī)端的系列了。
locale:國(guó)際化與本地化蟋软，就是什么中文啊镶摘、英文啊、日文啊那一套岳守。
plugins:插件凄敢，一些復(fù)雜的功能可能需要插件，EasyUI估計(jì)是選了一些做的很好的插件直接集成到官方包里了湿痢。
src:應(yīng)該是源代碼涝缝，大神常用，修改修改譬重，更符合需求
themes:主題拒逮，看來(lái)EasyUI應(yīng)該也不是千篇一律的外觀，可以有主題設(shè)計(jì)
最后還有幾個(gè)js文件臀规，關(guān)鍵字easyui滩援、jquery之類的，因?yàn)閑asyui是基于jquery的塔嬉，所以要先引入jquery.js玩徊，再引入easyui.js，而min表示壓縮版的js文件谨究，這種js文件比較短小精悍恩袱，可以節(jié)省流量加快速度。
第五步澈吨，由圖可見(jiàn)locale國(guó)際化文件夾和jquery.js報(bào)錯(cuò)了把敢，國(guó)際化那個(gè)錯(cuò)好分析，估計(jì)就是編碼問(wèn)題了棚辽，我們?cè)谟覔繇?xiàng)目選擇properties，然后將編碼改為UTF-8冰肴，然后問(wèn)題解決如圖：
至于js那個(gè)錯(cuò)屈藐，我們打開(kāi)jquery.min.js文件，鼠標(biāo)指到錯(cuò)誤上提示：Missing semicolon熙尉，這句話的意思是丟失分號(hào)联逻。貓哥猜測(cè)應(yīng)該是我們使用了精簡(jiǎn)版本的js文件導(dǎo)致精簡(jiǎn)的連分號(hào)都沒(méi)有了，沒(méi)辦法检痰，我們只好選中js文件包归，右鍵選擇MyEclipse，然后選擇Exclude from validation铅歼，也就是關(guān)閉對(duì)這個(gè)文件的檢查公壤，強(qiáng)制不報(bào)錯(cuò)，就行了椎椰。（人家本來(lái)就是沒(méi)有錯(cuò)）厦幅。
第六步，好了慨飘，終于可以開(kāi)始使用easyui了确憨，打開(kāi)默認(rèn)的index.jsp文件，編輯如下瓤的，一定要注意的是休弃，引用了這四個(gè)文件，我們就可以暢快的使用EasyUI了圈膏。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>index.jsp</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
This is my JSP page. <br>
</body>
</html>
第七步塔猾，我們來(lái)做一個(gè)簡(jiǎn)單的測(cè)試，將<a href="#" class="easyui-linkbutton" >搜索</a>稽坤，放入body中:
在瀏覽器中瀏覽如下：
可見(jiàn)定義的樣式已然生效桥帆，效果也算不錯(cuò)，所以如果比較了解前端框架的話慎皱，有時(shí)候看到別人做的網(wǎng)站老虫，便是會(huì)心一笑——你小子，EasyUI做的啊茫多，不錯(cuò)啊祈匙。
OVER！
