easybui

v1.9.30

Published

a month ago

BUI is a Webapp UI component development framework based on jQuery or Zepto, with bidirectional state management, path-based routing and dynamic component loading, rich template ecological resources, and zero configuration out of the box.

Downloads

121

0High
0Medium
0Low

imouou

bui buijs easybui bui.loader bui.store bui.router

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-app

demo

2. 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(){
            // 数据解析后执行
        }
    })

})

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme