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

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

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

Подготовка

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

npm ci

Команды

• npm test - тестирование всех задач;
• npm test <TASK> - тестирование задачи TASK (например, npm test sum протестирует 00-intro/01-sum);
• npm run file-serve - запуск локального сервера для ручного тестирования через npm пакет serve;
• npm run serve - запуск сервера разработки для ручного тестирования задач со сборщиком через vue-cli-service serve;
• npm run lint - проверка качества кода решений.

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

Если задача простая и у неё есть тесты, вы можете написать решение, протестировать его и сдать решение через задачник. Но иногда решение задачи хочется отлаживать, проверяя вручную. Для этого в каждой задаче есть возможность проверять задачу в браузере.

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

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

1. В корне репозитория выполните команду npm run file-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-vue-cli/01-CounterButton-vue);
3. После изменения файлов решения страница должна обновиться автоматически.

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

В задачнике настроена связка eslint + prettier через @vue/cli-plugin-eslint с eslint-plugin-vue.

Вы можете изменить конфигурацию линтера и форматера на ваше усмотрение в в файлах .eslintrc.js и .prettierrc.

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

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

• Работа с датой и временем
  • dayjs
  • date-fns
  • luxon
  • moment
• HTTP запросы
  • axios
  • ky
• Прочее
  • lodash-es
  • nanoid
  • uuid

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