本教程将指导您使用 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中文网其他相关文章！
