* docs: update guide deocs.

easysoft · Dec 14, 2023 · d450657 · d450657
1 parent f984266
commit d450657
Show file tree

Hide file tree

Showing 3 changed files with 174 additions and 30 deletions.
diff --git a/docs/docs/guide/customize/dev.md b/docs/docs/guide/customize/dev.md
@@ -21,3 +21,13 @@ ZUI3 每个组件在一个独立的目录内，拥有自己的 `package.json`
 ::: tip 提示
 通常组件通过在 `package.json` 文件中设置属性 `private: true` 来让包仅在 zui3 [工作空间](https://pnpm.io/zh/workspaces)内可用，但组件仍然拥有作为公开的包发布到 npm 上进行独立使用。
 :::
+
+## 文档开发服务
+
+启动 ZUI 文档网站开发服务执行如下命令：
+
+```shell
+$ pnpm docs:dev
+```
+
+此命令会先打包 ZUI 并启动文档开发服务器，默认情况下可以通过网址：`http://localhost:5174/` 来访问文档开发服务页面。
diff --git a/docs/docs/guide/start/compatibility.md b/docs/docs/guide/start/compatibility.md
@@ -0,0 +1,19 @@
+# 兼容性
+
+## 支持的浏览器
+
+* Chrome：49+
+* Firefox：45+
+* Safari：10+
+* Edge：13+
+* Chrome for Android：112+
+* iOS Safari：10+
+
+## 用到的第三方库
+
+在 ZUI 3 中使用了一些精心挑选的第三方库，这些库通常足够小巧但实用：
+
+* [preact](https://preactjs.com/) - 基于 Preact 实现了大部分 JS 组件，通过封装支持原生调用
+* [cash-dom](https://hmble.github.io/cash/) - 提供了大量辅助方法方便操作 DOM，同时提供了对 jQuery 的兼容实用方式
+* [floating UI](https://floating-ui.com/) - 实现浮动交互定位，例如下拉菜单、工具提示等
+* [tinykeys](https://github.com/jamiebuilds/tinykeys/) - 实现快捷键功能
diff --git a/docs/docs/guide/start/index.md b/docs/docs/guide/start/index.md
@@ -1,42 +1,157 @@
 # 快速开始
 
-## 兼容性
+## 下载使用
 
-### 支持的浏览器
+你可以从如下地址下载 ZUI 的最新版本：
 
-* Chrome：49+
-* Firefox：45+
-* Safari：10+
-* Edge：13+
-* Chrome for Android：112+
-* iOS Safari：10+
+<div class="vp-raw row gap-4">
+  <a class="btn primary size-lg rounded-full" href="/zui/zui.latest.zip" download><i class="icon icon-download-alt icon-lg"></i> 点击下载</a>
+  <a class="btn outline size-lg rounded-full" :href="`https://github.com/easysoft/zui/releases/tag/v${version}`" target="_blank"><i class="icon icon-github icon-lg"></i> 从 GitHub 下载</a>
+</div>
 
-### 关键特性
+下载后将如下文件解压到你的项目中：
 
-#### JS
+```text
+zui/
+├── zui.css
+├── zui.js
+└── zui.esm.js
+```
 
-* ✅ `let`、`const`
-* ✅ 箭头函数
-* ✅ 模版字符串
-* ✅ `class`
-* ✅ `symbol`
-* ✅ `Set`、`Map`
-* ✅ `Promise`
-* ✅ 扩展运算符 `...`
-* ✅ `Object.assign`、`Object.keys`
-* 🚫 `Object.entries`、`Object.values`
-* 🚫 `async`、`await`
-* 🚫 解构赋值
+下载后在页面中导入：
 
-#### CSS
+```html {7,12}
+<!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>
+```
 
-* ✅ `var()`
-* ✅ `calc()`
-* 🚫 `vw`、`vh`
+## 使用 CDN
 
-### 第三方依赖
+使用 CDN 可以快速使用 ZUI，与下载使用基本一样，只需要将相关资源文件替换为 CDN 上的地址即可：
 
-* [floating UI](https://floating-ui.com/)
-* [preact](https://preactjs.com/)
+::: code-group
 
-如果把握不准对照支持的浏览器参考 https://caniuse.com/ 。
+```html-vue [jsdelivr] {7,12}
+<!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/{{version}}/zui.css">
+  </head>
+  <body>
+    <h1>ZUI is awesome!</h1>
+    <a class="btn" href="/">访问 ZUI 网站</a>
+    <script src="///cdn.jsdelivr.net/npm/zui/dist/{{version}}/zui.js" crossorigin="anonymous"></script>
+  </body>
+</html>
+```
+
+```html-vue [bootcdn] {7,12}
+<!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/{{version}}/zui.css">
+  </head>
+  <body>
+    <h1>ZUI is awesome!</h1>
+    <a class="btn" href="/">访问 ZUI 网站</a>
+    <script src="///cdn.bootcdn.net/ajax/libs/zui/{{version}}/zui.js" crossorigin="anonymous"></script>
+  </body>
+</html>
+```
+
+```html-vue [unpkg] {7,12}
+<!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@{{version}}/zui.css">
+  </head>
+  <body>
+    <h1>ZUI is awesome!</h1>
+    <a class="btn" href="/">访问 ZUI 网站</a>
+    <script src="///unpkg.com/zui@{{version}}/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 zui from './zui/zui.esm.js';
+
+zui.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 中的单个组件，例如 [数据表格](/lib/dtable/dtable/)，你可以这样导入：
+
+```js
+import {DTable} from 'zui/lib/dtable';
+import 'zui/lib/dtable/css';
+```
+
+<script setup>
+const version = __ZUI_VERSION__;
+</script>