本教學將指導您使用 Vite 和 TypeScript 建立一個基本的待辦事項清單應用程式。 我們將保持簡單，專注於 Vite 的核心功能，無需外部框架或庫。
項目設定
確保安裝了 Node.js 和 npm。 然後，使用終端機建立並初始化項目：
<code class="language-bash"># Create a new Vite project npm create vite@latest my-todo-app -- --template vanilla-ts # Navigate to the project directory cd my-todo-app # Install dependencies npm install # Open in your code editor code .</code>
這將建立 my-todo-app，一個使用 vanilla-ts 模板的 Vite 項目，非常適合簡單的 TypeScript 應用程式。 安裝依賴項後，在您喜歡的程式碼編輯器中開啟專案。
專案結構
您的專案目錄將具有以下結構：
<code>my-todo-app/ ├── node_modules/ ├── public/ │ └── vite.svg ├── src/ │ ├── main.ts │ └── style.css ├── index.html ├── package.json ├── tsconfig.json ├── vite.config.ts └── package-lock.json</code>
src/main.ts 包含您的應用程式邏輯，public/ 保存靜態資產，index.html 是入口點。 package.json 管理依賴關係。
修改src/main.ts
將 src/main.ts 的內容替換為以下程式碼：
<code class="language-typescript">interface Todo {
id: number;
text: string;
completed: boolean;
}
let todos: Todo[] = [];
let nextTodoId = 1;
const todoInput = document.createElement('input');
todoInput.type = 'text';
todoInput.placeholder = 'Enter a new todo';
const addButton = document.createElement('button');
addButton.textContent = 'Add Todo';
const todoList = document.createElement('ul');
document.body.appendChild(todoInput);
document.body.appendChild(addButton);
document.body.appendChild(todoList);
function renderTodos() {
todoList.innerHTML = '';
todos.forEach(todo => {
const listItem = document.createElement('li');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.checked = todo.completed;
checkbox.addEventListener('change', () => toggleTodo(todo.id));
const label = document.createElement('label');
label.textContent = todo.text;
label.style.textDecoration = todo.completed ? 'line-through' : 'none';
const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.addEventListener('click', () => deleteTodo(todo.id));
listItem.appendChild(checkbox);
listItem.appendChild(label);
listItem.appendChild(deleteButton);
todoList.appendChild(listItem);
});
}
function addTodo() {
const text = todoInput.value.trim();
if (text) {
const newTodo: Todo = {
id: nextTodoId++,
text: text,
completed: false,
};
todos.push(newTodo);
todoInput.value = '';
renderTodos();
}
}
function toggleTodo(id: number) {
todos = todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
);
renderTodos();
}
function deleteTodo(id: number) {
todos = todos.filter(todo => todo.id !== id);
renderTodos();
}
addButton.addEventListener('click', addTodo);
renderTodos();</code>此 TypeScript 程式碼實現了待辦事項清單的核心功能：新增、完成和刪除任務。
修改index.html
使用以下內容更新index.html：
<code class="language-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 To-Do</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html></code>這只包含 main.ts 腳本。 實際渲染在 JavaScript 中動態發生。
運行開發伺服器並建置
運行 npm run dev 啟動開發伺服器（可透過 http://localhost:5173 存取）。 對於生產版本，請使用 npm run build。 這將在 dist 資料夾中建立一個生產就緒版本。
這份簡化的指南提供了使用 Vite 和 TypeScript 建立簡單的待辦事項清單應用程式的清晰路徑。 您可以根據需要透過整合 UI 框架或其他樣式來擴展此基礎。
以上是使用 TypeScript 設定 Vite 以獲得簡單的待辦事項列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！
