Sublime+BUI新手教程
欢迎来到Sublime+BUI新手教程，本文将为您介绍如何在Sublime Text中使用BUI框架进行前端开发。
一、安装Sublime Text
首先，我们需要下载并安装Sublime Text，Sublime Text是一款轻量级但功能强大的文本编辑器。您可以从官网进行下载：https://www.sublimetext.com/。
安装完成后，我们可以打开Sublime Text，开始我们的BUI之旅。
二、安装Package Control插件
Sublime Text提供了许多插件，但是没有像VS Code那样预装。因此，我们需要自己手动安装Package Control插件。Package Control是一个插件管理器，它可以使我们更方便地安装、删除和更新插件。
打开Sublime Text，然后按下Ctrl + `（或者View -> Show Console）打开控制台。在控制台中输入下面的代码，来安装Package Control：
import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)三、安装BUI框架
有了Package Control插件之后，我们就可以更方便地安装其它插件了。
首先，我们需要安装Emmet插件。Emmet是一个能够快速生成HTML和CSS代码的插件，大大提高了我们的开发效率。
打开Sublime Text，然后按下Ctrl + Shift + P，输入“Package Control: Install Package”来打开插件管理器。在输入框中输入“Emmet”，然后按下Enter键进行安装。
接着，我们需要安装BUI框架。BUI是一款基于jQuery的前端UI框架，具有丰富的组件和良好的兼容性。
在插件管理器中输入“BUI”，然后安装“BUI”。
四、开始BUI之旅
有了Emmet和BUI框架之后，我们就可以开始进行BUI开发了。在Sublime Text中新建一个HTML文件，然后按下Tab键，输入“!”，再按下Tab键，就能快速生成HTML框架了。
在HTML标签中引入BUI框架的CSS和JS文件，以及jQuery库文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BUI Demo</title>
<link rel="stylesheet" href="http://cdn.bui.pm/static/bui/build/css/bui.css">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="http://cdn.bui.pm/static/bui/build/loader.js"></script>
<script type="text/javascript">
BUI.use(['bui/grid','bui/data'],function(Grid,Data){
var columns = [
{title:'姓名',dataIndex:'a',width:100},
{title:'年龄',dataIndex:'b',width:100},
{title:'性别',dataIndex:'c',width:100}
],
data = [{a:'张三',b:20,c:'男'},{a:'李四',b:23,c:'女'}];
var store = new Data.Store({
data:data
}),
grid = new Grid.Grid({
render:'#grid',
columns : columns,
store : store
});
grid.render();
});
</script>
<div id="grid"></div>
</body>
</html>
这是一个简单的BUI Grid组件示例，包括了表格头部和数据行。通过调用BUI和Data模块，表格可以从后台获取数据。
五、总结
通过本文的介绍，我们学习了如何在Sublime Text中安装Package Control插件、Emmet插件和BUI框架，以及如何使用BUI框架进行前端开发。希望这些内容能对您有所帮助，并能顺利进行BUI开发。
最后，我推荐一个BUI的中文文档，它详细地介绍了BUI的使用方法和组件，可以作为我们学习的参考资料：http://www.bui.pm/doc/index.html