Einrichten von Vite mit TypeScript für eine einfache To-Do-Liste-js-Tutorial-php.cn

Einrichten von Vite mit TypeScript für eine einfache To-Do-Liste

Susan Sarandon

Freigeben： 2025-01-17 04:31:08

Original

604 Leute haben es durchsucht

Setting up Vite with TypeScript for a Simple To-Do List

Dieses Tutorial führt Sie durch die Erstellung einer einfachen To-Do-Listen-App mit Vite und TypeScript. Wir halten die Dinge unkompliziert und konzentrieren uns auf die Kernfunktionalität von Vite ohne externe Frameworks oder Bibliotheken.

Projekteinrichtung

Stellen Sie sicher, dass Node.js und npm installiert sind. Verwenden Sie dann Ihr Terminal, um das Projekt zu erstellen und zu initialisieren:

<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>

Nach dem Login kopieren

Dadurch wird my-todo-app erstellt, ein Vite-Projekt unter Verwendung der vanilla-ts-Vorlage, ideal für eine einfache TypeScript-Anwendung. Öffnen Sie nach der Installation der Abhängigkeiten das Projekt in Ihrem bevorzugten Code-Editor.

Projektstruktur

Ihr Projektverzeichnis wird diese Struktur haben:

<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>

Nach dem Login kopieren

src/main.ts enthält Ihre Anwendungslogik, public/ enthält statische Assets und index.html ist der Einstiegspunkt. package.json verwaltet Abhängigkeiten.

Ändern src/main.ts

Ersetzen Sie den Inhalt von src/main.ts durch diesen Code:

<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>

Nach dem Login kopieren

Dieser TypeScript-Code implementiert die Kernfunktionalität der To-Do-Liste: Aufgaben hinzufügen, abschließen und löschen.

Ändern index.html

Update index.html mit diesem Inhalt:

<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>

Nach dem Login kopieren

Dazu gehört einfach das main.ts-Skript. Das eigentliche Rendering erfolgt dynamisch innerhalb des JavaScript.

Ausführen des Entwicklungsservers und Erstellen

Führen Sie npm run dev aus, um den Entwicklungsserver zu starten (zugänglich unter http://localhost:5173). Für einen Produktions-Build verwenden Sie npm run build. Dadurch wird eine produktionsbereite Version im Ordner dist erstellt.

Diese optimierte Anleitung bietet einen klaren Weg zum Erstellen einer einfachen To-Do-Listen-Anwendung mit Vite und TypeScript. Sie können diese Grundlage erweitern, indem Sie nach Bedarf UI-Frameworks oder zusätzliche Stile integrieren.

Das obige ist der detaillierte Inhalt vonEinrichten von Vite mit TypeScript für eine einfache To-Do-Liste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!