BUI框架入门快速上手前端脚手架小白步骤教程 = 飞龙博客

BUI框架入门快速上手前端脚手架小白步骤教程

feilong.org 修订于2025-08-03 08:23:22 390 次浏览

抽空写这个BUI框架入门的快速上手教程，小白一看就懂，不需多想什么，找步骤走就行。方便前端开的朋友工作时用到。

本文主要了解这些内容：BUI框架是干什么用的？BUI框架本地安装和开发部署，bui开发包的文件结构内容，以及创建新的bui模块，以焦点切好图为例。更新地址：https://feilong.org/bui-jiaocheng-1

一、BUI框架是干什么用的?

BUI框架是用来构建界面交互的UI和js脚手架。
类似于vue cli。

BUI框架专注webapp开发。
开发者只需关注业务的开发。
界面的布局及交互交给BUI。

开发出来的应用, 可以嵌入微信公众号, 微信小程序webview, 聆客, 钉钉, 淘宝, 支付宝等平台。
可以跟第三方平台打包成独立应用( Bingotouch , Cordova , Dcloud , APICloud , Appcan 等)。
跨平台展示. 包括Ipad

二、BUI框架本地安装，开发部署，简要步骤。

1、下载 nodejs 。如果已经下载node，请跳过。
node下载官方地址：http://nodejs.cn/download
如果是window操作系统，就下载windows安装包。

2、安装 nodejs。如果已经下载node，请跳过。
下载node安装包后，右键，安装。
安装完后，打开命令行工具，输入以下命令，查看是否安装node环境成功。
node -v
npm -v

3、下载BUI单页开发包。
http://www.easybui.com/downloads

4、解压BUI单页开发包，改文件夹名称为 bui0
这个文件夹当作学习开发包代码用。
也可以当作复制创建新项目的备胎。
飞龙提示，请不要在这里建立项目。

5、复制bui0文件夹内容，改文件夹名称为bui1。
此文件夹是我们的第一个bui项目。
存放路径和文件夹的名称可以自己确定。
存放路径和文件夹名称不要有汉字。
文件夹和文件名也不要以数字开头。

6、转到bui1文件夹。

7、在此bui1文件夹下打开cmd命令行工具
方法：鼠标放在当前文件夹路径里的空白区域，然后输入 cmd，然后回车。

8、命令行工具，输入以下命令，然后回车。
npm install

安装完后，在bui1文件夹下，多了一个 node_modules 文件夹。
里面是项目所依赖的第三方组件。

具体需安装哪些依赖组件，在 package.json里 devDependencies 和 dependencies 有列举。

9、命令行工具，输入以下命令，然后回车。
npm run dev
此命令自动运行启动服务器，完成后，自动打开网页浏览器。

二、了解bui开发包的文件结构内容。
第9步的启动服务器命令的定义，定义在 package.json 的 scripts。

bui1文件夹自动生成dist，编译打包后的输出代码都在这里。

自动生成的.tmp临时文件夹以及 package-lock.json，可以先不管。

浏览器默认访问网址和端口是bui自己配置的，
具体生成过程可查看 gulpfile.js 和 app.json

src目录是开发源代码。前端开发人员主要在这里写代码。
打开src文件夹，了解文件夹结构。

pages里是放页面级模块。当然，也可以放组件级的模块。

根模块是 index.html和index.js
#bui-router 可以改为其它名字，但是要注意，css文件里也需要修改。

默认的页面模块是 pages/main文件夹下的main.html和main.js
在package.json的 package节点，是这个默认的页面模块的定义。

三、bui框架如何创建新的模块，小白简要步骤？
很简单。照葫芦画瓢，飞龙写的简要步骤。
我们准备为main页添加一个焦点切好图模块。

1、转到pages文件夹下，复制 main文件夹，改文件夹名称。
比如 slide。

2、进入slide文件夹，然后把文件改为 slide.html和 slide.js
也可以为其它名称，比如 qiehuan.html和qiehuan.js.

这html和js文件，是一个bui模块的两个构成文件。
这两文件的名字，习惯于与文件夹名称保持一致，但强制。
一个文件夹下也可以放多个模块的构成文件。

3、打开slide.html,输入以下代码，并保存。

<div class="bui-slide"></div>

1	<div class="bui-slide"></div>

4、打开slide.js,输入以下代码，保存。

/**
 * 焦点图模块
 * 默认模块名: slide
 * @return {[object]}  [ 返回一个对象 ]
 */
 
// 定义一个模块
loader.define(function(require, exports, module) {
	console.log('000 feilong module=',module);


// 通过模块的id来获取不同的参数, 所有属性的参数都会被拿到.
  var params = bui.history.getParams(module.id);
  //console.log('000 feilong bui.history=',bui.history);
  
  // 区分不同的接口
  var url = "http://localhost/api/"+params.type;
  console.log('000 feilong url=',url);
  
  

	// module.id 如果component没有id则随机生成, 通过外层component生成的id 来区分不同的控件slide
  var uiSlide = bui.slide({
        id: `#${module.id} .bui-slide`,
        height: 380,
        autopage: true,
        data: []
  })
  
  var sucFn=function(res){
      // 测试数据
      res = [{
          image: "images/sli2.jpg",
          url: "pages/good/good.html",
        },{
          image: "images/sli3.jpg",
          url: "pages/good/good.html",
        },{
          image: "images/sli4.jpg",
          url: "pages/good/good.html",
        }]
      // 修改轮播图的数据
      uiSlide.option("data",res);
    }
  
  // 请求数据后渲染
  sucFn();
  
  /* 
  bui.ajax({
    url:url,
    success: sucFn
  })
  */
	
})

/**

* 焦点图模块

* 默认模块名: slide

* @return {[object]} [ 返回一个对象 ]

// 定义一个模块

loader.define(function(require, exports, module) {

console.log('000 feilong module=',module);

// 通过模块的id来获取不同的参数, 所有属性的参数都会被拿到.

var params = bui.history.getParams(module.id);

//console.log('000 feilong bui.history=',bui.history);

// 区分不同的接口

var url = "http://localhost/api/"+params.type;

console.log('000 feilong url=',url);

// module.id 如果component没有id则随机生成, 通过外层component生成的id 来区分不同的控件slide

var uiSlide = bui.slide({

id: `#${module.id} .bui-slide`,

height: 380,

autopage: true,

data: []

})

var sucFn=function(res){

// 测试数据

res = [{

image: "images/sli2.jpg",

url: "pages/good/good.html",

},{

image: "images/sli3.jpg",

url: "pages/good/good.html",

},{

image: "images/sli4.jpg",

url: "pages/good/good.html",

}]

// 修改轮播图的数据

uiSlide.option("data",res);

}

// 请求数据后渲染

sucFn();

bui.ajax({

url:url,

success: sucFn

})

5、剩下的自己测试和了解吧。

6、自己再增加其它的模块

更新网址：https://feilong.org/bui-jiaocheng-1
最初发布：20211217 06:33:17 feilong.org 于广州

加入收藏夹，查看更方便。

所在分类： bui 教程