快速開始
本頁說明 QuickUI 的安裝方式，以及如何把第一個資料物件綁定到頁面上。
前置需求
| 項目 | 需求 |
|---|---|
| 瀏覽器 | 支援 ES2022、Proxy、IntersectionObserver、structuredClone |
| HTTP 伺服器 | 使用 i18n 外部檔或 <temp :path> 時必須透過 HTTP 載入；file:// 下 fetch 會失敗 |
| Node.js | 只有從原始碼建置時需要 |
安裝
CDN
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@latest/dist/QuickUI.js"></script>
載入後全域會出現 QUI、_、$ 三個名稱，詳見 全域工具。
npm
npm i @pardnchiu/quickui
ESM
import { QUI } from "@pardnchiu/quickui/dist/QuickUI.esm.js";
ESM 版本與 CDN 版本是同一份程式，只在結尾多匯出 window.QUI，所以匯入時仍會註冊全域名稱。
從原始碼建置
git clone https://github.com/pardnchiu/QuickUI.git
cd QuickUI
npm install
npm run build:once
build:once 先以 tsc 把 src/ 合併成 src/QuickUI.debug.js，再用 terser 產出 dist/QuickUI.js 與 dist/QuickUI.esm.js。
第一個應用
<div id="app">
<h1>{{ title }}</h1>
<p>{{ description }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/quickui@latest/dist/QuickUI.js"></script>
<script>
const app = new QUI({
id: "app",
data: {
title: "Hello QuickUI",
description: "A lightweight frontend framework",
},
});
</script>
id 指向既有元素，QuickUI 以該元素的內容作為模板；之後修改 app.data.title 會在約 300 ms 後重新渲染。