SUI前端开发框架快速入门

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>