From d45065757b7544ae63eb6c627d253cb0f655d90b Mon Sep 17 00:00:00 2001 From: sunhao Date: Thu, 14 Dec 2023 17:57:09 +0800 Subject: [PATCH] * docs: update guide deocs. --- docs/docs/guide/customize/dev.md | 10 ++ docs/docs/guide/start/compatibility.md | 19 +++ docs/docs/guide/start/index.md | 175 ++++++++++++++++++++----- 3 files changed, 174 insertions(+), 30 deletions(-) create mode 100644 docs/docs/guide/start/compatibility.md diff --git a/docs/docs/guide/customize/dev.md b/docs/docs/guide/customize/dev.md index e85e283d29..874d91cc33 100644 --- 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 new file mode 100644 index 0000000000..e526691c13 --- /dev/null +++ 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 index 61774e007d..ab807b3e3e 100644 --- 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+ +
+ 点击下载 + 从 GitHub 下载 +
-### 关键特性 +下载后将如下文件解压到你的项目中： -#### 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} + + + + + + ZUI + + + +

ZUI is awesome!

+ 访问 ZUI 网站 + + + +``` -* ✅ `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} + + + + + + ZUI + + + +

ZUI is awesome!

+ 访问 ZUI 网站 + + + +``` + +```html-vue [bootcdn] {7,12} + + + + + + ZUI + + + +

ZUI is awesome!

+ 访问 ZUI 网站 + + + +``` + +```html-vue [unpkg] {7,12} + + + + + + ZUI + + + +

ZUI is awesome!

+ 访问 ZUI 网站 + + + +``` + +::: + +## 使用 JS 组件 + +无论是下载还是使用 CDN，导入 `zui.js` 之后，你就可以使用 ZUI 中的 JS 组件了，ZUI 提供的所有 JS 辅助方法和组件类都在全局对象 `zui` 上进行访问，例如： + +```html + + + +``` + +## 使用 ES Module + +ZUI 还提供了 ES Module 版本，你可以在 JS 代码中导入： + +```html + +``` + +## 使用 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'; +``` + +