E:\song\threejs_learn\vite-project\index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
E:\song\threejs_learn\vite-project\src\counter.ts
/**
* 1. 计数器
* @param element html元素
*/
export function setupCounter(element: HTMLButtonElement) {
// 计数器初始值
let counter = 0;
// 回调函数
const setCounter = (count: number) => {
counter = count;
element.innerHTML = `count is ${counter}`;
};
// 添加click事件
element.addEventListener("click", () => setCounter(counter + 1));
setCounter(0);
}
E:\song\threejs_learn\vite-project\src\main.ts
/**
* 1. vanilla + typescript
* 2. 原生加ts大法
* 3. 这是使用vite创建的模板
*/
import "./style.css";
import { setupCounter } from "./counter";
document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
<div>
<a href="https://vitejs.dev" target="_blank">
<img src="/vite.svg" class="logo" alt="Vite logo" />
</a>
<a href="https://www.typescriptlang.org/" target="_blank">
<img src="/typescript.svg" class="logo vanilla" alt="TypeScript logo" />
</a>
<h1>Vite + TypeScript</h1>
<div class="card">
<button id="counter" type="button"></button>
</div>
<p class="read-the-docs">
Click on the Vite and TypeScript logos to learn more
</p>
</div>
`;
setupCounter(document.querySelector<HTMLButtonElement>("#counter")!);
