1、启动HBuilder软件，创建一个Web项目，在项目名称栏输入HelloSUI，确定后HBuilder会自动生成相关的缺省目录和index.html文件
2、引入SUI库文件方式一：网络引入
在HTML页面中直接通过网络方式引入SUI库文件，这种方式最简单，但是要求电脑是可以联网的。
修改index.html文件，在文件中增加jquery，sui库（包括css和js库）的引入
<link href="http://g.alicdn.com/sj/dpl/1.5.1/css/sui.min.css" rel="stylesheet">
<script type="text/javascript" src="http://g.alicdn.com/sj/lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="http://g.alicdn.com/sj/dpl/1.5.1/js/sui.min.js"></script>
3、引入SUI库文件方式二：本地引入
1）这时候需要先从github上下载已经编译好的SUI库压缩包文件，选择build分支进行下载。
2）将下载下来的sui-build.zip文件解压缩后将.package目录下的所有文件文件和目录复制到HelloSUI工程目录下
4）下载jQuery的js库文件到HelloSUI的js目录下
3）在index.html文件中的head中引入本地sui库和jQuery js库
<link href="css/sui.min.css" rel="stylesheet"/>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/sui.min.js" ></script>
4、使用SUI库的样式以及组件，编写测试页面
如增加一个导航面包屑内容：就可以直接使用SUI的样式sui-breadcrumb
<!--
作者：hexixp@163.com
时间：2017-03-01
描述：面包屑
-->
<ul class="sui-breadcrumb">
<li><a href="#">Home Page</a></li>
<li><a href="#">Mobile Phone</a></li>
<li><a href="#">Shoes</a></li>
<li class="active">Sports</li>
</ul>
