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-alpha.4/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-alpha.4/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-alpha.4/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-alpha.4/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-alpha.4/zui.css">
</head>
<body>
<h1>ZUI is awesome!</h1>
<a class="btn" href="/">访问 ZUI 网站</a>
<script src="///unpkg.com/zui@3.0.0-alpha.4/zui.js" crossorigin="anonymous"></script>
</body>
</html>使用 JS 组件
无论是下载还是使用 CDN，导入 zui.js 之后，你就可以使用 ZUI 中的 JS 组件了，ZUI 提供的所有 JS 辅助方法和组件类都在全局对象 zui 上进行访问，例如：
html
<nav id="nav"></nav>
<script>
const {Nav} = zui;
const nav = new Nav('#myNav', {
items: [
{text: 'Home'},
{text: 'Blog'},
]
});
zui.Messager.show('Hello!');
</script>使用 ES Module
ZUI 还提供了 ES Module 版本，你可以在 JS 代码中导入：
html
<script type="module">
import {Messager} from './zui/zui.esm.js';
Messager.show('Hello!');
</script>使用 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';