Blog Detail

  • 快速上手​

    快速上手 ​下载使用 ​你可以从如下地址下载 ZUI 的最新版本：

    点击下载 从 GitHub 下载下载后将如下文件解压到你的项目中：

    textzui/

    ├── zui.css

    ├── zui.js

    └── zui.esm.js下载后在页面中导入：

    html

    ZUI

    ZUI is awesome!

    访问 ZUI 网站

    使用 CDN ​使用 CDN 可以快速使用 ZUI，与下载使用基本一样，只需要将相关资源文件替换为 CDN 上的地址即可：

    jsdelivrbootcdnunpkghtml

    ZUI

    ZUI is awesome!

    访问 ZUI 网站

    html

    ZUI

    ZUI is awesome!

    访问 ZUI 网站

    html

    ZUI

    ZUI is awesome!

    访问 ZUI 网站

    使用 JS 组件 ​无论是下载还是使用 CDN，导入 zui.js 之后，你就可以使用 ZUI 中的 JS 组件了，ZUI 提供的所有 JS 辅助方法和组件类都在全局对象 zui 上进行访问，例如：

    html

    使用 ES Module ​ZUI 还提供了 ES Module 版本，上例中的 JS 代码可以改为：

    html

    使用 zui-create 声明组件 ​在 ZUI 中，所有 JS 组件支持通过声明 zui-create 属性来自动创建，例如：

    示例HTML使用 zui-create- 来定义组件选项，例如：

    示例HTML注意

    通过 zui-create 创建的组件，只会在页面加载完成后自动扫描一次，如果需要在动态添加的元素上利用 zui-create 创建组件，需要手动执行 $(element).zuiInit() 初始化。

    使用 npm ​你可以使用 npm 安装 ZUI：

    bash$ npm install zui然后在 JS 代码中导入：

    jsimport zui from 'zui';

    import 'zui/css';

    zui.Messager.show('Hello!');如果你仅仅需要 ZUI 中的单个组件，例如 数据表格，你可以这样导入：

    jsimport {DTable} from 'zui/lib/dtable';

    import 'zui/lib/dtable/css';

    const myTable = new DTable('#myTable', {...});