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
| |
| |
| |
| |
| export function setupCounter(element: HTMLButtonElement) { |
| |
| let counter = 0; |
| |
| const setCounter = (count: number) => { |
| counter = count; |
| element.innerHTML = `count is ${counter}`; |
| }; |
| |
| element.addEventListener("click", () => setCounter(counter + 1)); |
| setCounter(0); |
| } |
E:\song\threejs_learn\vite-project\src\main.ts
| |
| |
| |
| |
| |
| 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")!); |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!