GigaIDE: Список задач (Vue.js)

Описание проекта

Простое веб-приложение для управления списком задач с использованием Vue 3 и TypeScript. Приложение позволяет отмечать задачи как выполненные с эффектом зачеркивания.

Технологические особенности

• Vue 3 Composition API (
  <script setup>
  );
• Реактивное состояние (
  ref()
  );
• TypeScript для типобезопасности;
• Scoped-стилизация;
• Простое управление состянием задач.

Требования

• Node.js (протестировано на версии v22.11.0 LTS);
• npm или yarn.

Установка и запуск

1. Клонирование репозитория

При разработке на GitVerse, вам достаточно открыть репозиторий в GIGA IDE Cloud. Не нужно делать никаких дополнительных действий для клонирования репозитория или настройки имени пользователя.

2. Установка зависимостей

3. Запуск в режиме разработки

4. Открытие приложения

После запуска приложения через терминал или с помощью отладчика откройте вкладку "Облачные порты" в нижней панели. В списке активных портов найдите порт 5173 и нажмите кнопку "Опубликовать". После успешной публикации появится всплывающее окно с предложением перейти на публичный адрес нового порта, он будет иметь вид:

Функциональность

• Отображение списка задач с возможностью отметки;
• Зачеркивание выполненных задач.

Структура проекта

• App.vue
  : Основная часть приложения;
  • Стили являются частью
    App.vue
    ;
• types/Todo.ts
  : Компонент списка задач;
• styles/globals.css
  : Глобальные стили.

Лицензия

Universal Permissive License