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 <!-- 作者：[email protected] 时间：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>
