Задачник курса по Vue 3

Использование задачника

Подробная инструкция по работе с задачником описана во введении в 00-intro/README.md.

Подготовка

Перед началом работы требуется установить Node.js все необходимые npm пакеты. Они понадобятся для запуска и проверки решений.

npm ci

Команды

# Тестирование всех задач
npm test

# Тестирование задачи TASK (например, "npm test sum" протестирует "00-intro/01-sum")
npm test <TASK>

# Запуск локального сервера для ручного тестирования через npm пакет serve
npm run file-serve

# Запуск сервера разработки для ручного тестирования задач со сборщиком через vue-cli-service serve
npm run serve

# Проверка качества кода через eslint
npm run lint

# Проверка качества кода через eslint с исправлением проблем
npm run lint:fix

# Форматирование решений с prettier
npm run format

Ручное тестирование и отладка

Для удобства решения в каждой задаче есть окружение для ручного тестирования в браузере.

Задачи без сборки

Решение задачи без сборки можно проверить, открыв index.html. Но просто открыть HTML документ в браузере как файл не получится из-за политик безопасности браузера в использовании ECMAScript модулей, а также настроек путей до файлов. Потребуется запуск локального сервера:

1. В корне репозитория выполните команду npm run file-serve (запуск http сервера serve);
2. Откройте страницу по ссылке из терминала (или из буфера обмена) и выберите нужную директорию, например 00-intro/01-sum, либо сразу откройте страницу задачи по ссылке из инструкции (например, http://localhost:5000/00-intro/01-sum);
3. После изменения файлов решения обновите страницу.

Задачи со сборкой

Начиная с третьего вебинара мы начнём разрабатывать с использованием инструментов сборки.

1. В корне репозитория выполните команду npm run serve;
   Выполнится запуск Webpack DevServer через vue-cli-service.
2. Откройте страницу по ссылке из терминала и выберите нужную задачу, либо сразу откройте страницу задачи по ссылке из инструкции (например, http://localhost:8080/03-sfc/01-CounterButtonSfc);
3. После изменения файлов решения страница должна обновиться автоматически.

В этих задачах также можно использовать JSX, TS и TSX.

Проверка качества кода и форматирование кода

В задачнике настроена связка eslint + prettier. Вы можете изменить конфигурацию линтера и форматера на ваше усмотрение в файлах .eslintrc.js и .prettierrc, а также настраивать .editorconfig, .gitattributes и другие конфигурационные файлы. Линтер и форматер не запускаются автоматически. Вы можете запускать их вручную, либо настроить свою IDE.

Доступные библиотеки

В задачнике доступны дополнительные библиотеки, которые вы можете использовать при решении задач:

• Работа с датой и временем
  • dayjs
  • date-fns
  • luxon
  • moment
• Прочее
  • lodash-es
  • @tweenjs/tween.js

В файлах задач могут быть дополнительные библиотеки.

Вы также можете устанавливать другие библиотеки для ваших решений, но лучше уточнить необходимость у преподавателя.