1.9.30 • Published 9 months ago
easybui v1.9.30
BUI Webapp UI Component Frame
描述 Description
BUI 是基于jQuery或者Zepto的Webapp UI组件开发框架，双向状态管理，路径式路由和动态组件加载，丰富的模板生态资源，开箱即用零配置，一次开发跨平台、完美嵌入企业微信、小程序、公众号、钉钉、link等平台或通过Cordova、Dcloud、鸿蒙、Flutter打包独立 APP。
获取更多信息，请进官网查看：https://www.easybui.com
推荐使用工程化的方式，使用BUI的完整功能(单页路由、模块化、组件化、状态管理)等。
1. 创建BUI工程化的方式 Project Create
# create project name bui-app/package.json
npx buijs@latest create bui-app2. CDN的使用方式
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>BUI</title>
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,viewport-fit=cover">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easybui@latest/css/bui.css" />
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="bui-page">
<h1 b-text="page.title"></h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/easybui@latest/js/bui.js"></script>
<script>
bui.ready(function (global) {
// 双向状态管理
var bs = bui.store({
el: `#bui-page`,
scope: "page",
data: {
title: "BUI Webapp",
},
methods: {},
watch: {},
computed: {},
templates: {},
beforeMount: function(){
// 数据解析前执行, 修改data的数据示例
// this.$data.a = 2
},
mounted: function(){
// 数据解析后执行
}
})
})
</script>
</body>
</html>3. NPM的使用方式
当前包结合了 Zepto + BUI 的版本，便于import 和第三方一起使用。
安装 Install
npm i easybui -S使用 Use BUI
<div id="bui-page">
<h1 b-text="page.title"></h1>
</div>// import bui
import bui from 'easybui';
// 导入全局配置，根据需要使用
// import './js/global';
bui.ready(function (global) {
// 双向状态管理
var bs = bui.store({
el: `#bui-page`,
scope: "page",
data: {
title: "BUI Webapp",
},
methods: {},
watch: {},
computed: {},
templates: {},
beforeMount: function(){
// 数据解析前执行, 修改data的数据示例
// this.$data.a = 2
},
mounted: function(){
// 数据解析后执行
}
})
})