ZUI 3快速上手
下载使用
你可以从如下地址下载 ZUI 的最新版本：
下载后将如下文件解压到你的项目中：
text
zui/
├── zui.css
├── zui.js
└── zui.esm.js下载后在页面中导入：
html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZUI</title>
<link rel="stylesheet" href="./zui/zui.css">
</head>
<body>
<h1>ZUI is awesome!</h1>
<a class="btn" href="/">访问 ZUI 网站</a>
<script src="./zui/zui.js"></script>
</body>
</html>使用 CDN
使用 CDN 可以快速使用 ZUI，与下载使用基本一样，只需要将相关资源文件替换为 CDN 上的地址即可：
html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZUI</title>
<link rel="stylesheet" href="///cdn.jsdelivr.net/npm/zui/dist/3.0.0/zui.css">
</head>
<body>
<h1>ZUI is awesome!</h1>
<a class="btn" href="/">访问 ZUI 网站</a>
<script src="///cdn.jsdelivr.net/npm/zui/dist/3.0.0/zui.js" crossorigin="anonymous"></script>
</body>
</html>html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZUI</title>
<link rel="stylesheet" href="///cdn.bootcdn.net/ajax/libs/zui/3.0.0/zui.css">
</head>
<body>
<h1>ZUI is awesome!</h1>
<a class="btn" href="/">访问 ZUI 网站</a>
<script src="///cdn.bootcdn.net/ajax/libs/zui/3.0.0/zui.js" crossorigin="anonymous"></script>
</body>
</html>html
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ZUI</title>
<link rel="stylesheet" href="///unpkg.com/zui@3.0.0/zui.css">
</head>
<body>
<h1>ZUI is awesome!</h1>
<a class="btn" href="/">访问 ZUI 网站</a>
<script src="///unpkg.com/zui@3.0.0/zui.js" crossorigin="anonymous"></script>
</body>
</html>使用 JS 组件
无论是下载还是使用 CDN，导入 zui.js 之后，你就可以使用 ZUI 中的 JS 组件了，ZUI 提供的所有 JS 辅助方法和组件类都在全局对象 zui 上进行访问，例如：
html
<nav id="myNav"></nav>
<script>
const {Nav, Messager} = zui;
const nav = new Nav('#myNav', {
items: [
{text: 'Home'},
{text: 'Blog'},
]
});
Messager.show('你好，今天是：' + zui.formatDate(new Date(), 'yyyy年M月d日'));
</script>使用 ES Module
ZUI 还提供了 ES Module 版本，上例中的 JS 代码可以改为：
html
<nav id="myNav"></nav>
<script>
import {Nav, Messager, formatDate} from './zui/zui.esm.js';
const nav = new Nav('#myNav', {
items: [
{text: 'Home'},
{text: 'Blog'},
]
});
Messager.show('你好，今天是：' + formatDate(new Date(), 'yyyy年M月d日'));
</script>使用 zui-create 声明组件
在 ZUI 中，所有 JS 组件支持通过声明 zui-create 属性来自动创建，例如：
使用 zui-create-<component> 来定义组件选项，例如：
注意
通过 zui-create 创建的组件，只会在页面加载完成后自动扫描一次，如果需要在动态添加的元素上利用 zui-create 创建组件，需要手动执行 $(element).zuiInit() 初始化。
使用 npm
你可以使用 npm 安装 ZUI：
bash
$ npm install zui然后在 JS 代码中导入：
js
import zui from 'zui';
import 'zui/css';
zui.Messager.show('Hello!');如果你仅仅需要 ZUI 中的单个组件，例如 数据表格，你可以这样导入：
js
import {DTable} from 'zui/lib/dtable';
import 'zui/lib/dtable/css';
const myTable = new DTable('#myTable', {...});