Skip to content
/ bui Public

基于jQuery,兼容KISSY 的富客户端控件库

License

Notifications You must be signed in to change notification settings

buiteam/bui

Repository files navigation

使用BUI

  • 引入样式文件
<head>
  <!-- some elements here -->
  <link href="http://g.alicdn.com/bui/bui/1.1.15/css/bs3/dpl.css" rel="stylesheet">
  <link href="http://g.alicdn.com/bui/bui/1.1.15/css/bs3/bui.css" rel="stylesheet">
</head>
  • 引入jQuery、seajs、bui配置文件
<body>
  <!-- some elements here -->
  <script type="text/javascript" chartset="utf-8" src="http://g.alicdn.com/fi/bui/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" chartset="utf-8" src="http://g.alicdn.com/bui/seajs/2.3.0/sea.js"></script>
  <script type="text/javascript" chartset="utf-8" src="http://g.alicdn.com/bui/bui/1.1.15/config-min.js"></script>
</body>

1.1.15为BUI版本,随着版本升级,引用地址可能会发生变化

bui Build Status

基于jQuery的富客户端控件库

文件结构

bui
├── src               // assets源文件夹
│   └── config.js     // bui的入口文件
├── assets            // 静态assets的目录
│   └── less          // less文件的目录
├── docs              // 源文件中未提供,但是可以自己执行 tools/jsduck/run.bat文件,请不要提交此文件夹
├── build             // 打包后最终文件的目录
│   │   ├── default   // 默认样式
│   │   └── bs3       // 基于bootstrap3重新编译的样式库
├── tools             // 工具类文件目录
│   │   └── jsduck    // jsduck的配置和执行文件目录
├── package.json      // bui的配置文件
└── README.md         // 说明文档

添加组件

  1. 打开package.json

  2. 找到下面这个节点

    "spm": {
      "dependencies": {
        "bui-common": "1.1.0"
      }
    }
    
  3. 在里面添加你的包名和版本号,如

    "spm": {
      "dependencies": {
        "bui-common": "1.1.0",
        "bui-new": "1.0.1"       //添加一个新的组件
      }
    }
    
  4. 执行gulp命令进行项目打包

查看如何开发一个组件

打包

项目打包:

gulp
  • 获取bui的组件
  • 合并js,压缩js
  • 编译less生成 css,压缩css
  • 将常用的js合并成一个bui.js

生成文档:

  • 使用jsduck 进行编译文档,tools/jsduck/run.bat
  • 配置文件在tools/jsduck/config.json
  • 如果不想配置环境,请下载文档API

文档地址

提交问题

提问

联系我们