/vue-20210304_d-graf

Primary LanguageCSS

Задачник курса по 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.

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

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

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