padding: 10px 10px;# Настройка проекта
Создание проекта
- Установить в систему Git с сайта https://git-scm.com/downloads (если уже не сделано).
- Установить в систему любой GUI для работы с Git (если уже не сделано). Например https://desktop.github.com/ или https://tortoisegit.org/. Многие редакторы кода имеют плагин или встроенную поддержку Git.
- Склонируйте проект по адресу из своего аккаунта локально в файловую систему.
Установка
Начальная установка и настройка проект предполагает несколько шагов, которые должны быть проделаны единожды в самом начале.
- Установить NodeJS с сайт http://nodejs.org. Установите последнюю версию. Проект совместим с NodeJS 6.9+.
- Запустите в командной строке
npm installнаходясь в корне проекта. Эта команда для автоматической установки всех модулей из открытых репозиториев. Это внешние зависимости, необходимые для работы инфраструктуры проекта.
Разработка
Инструменты
Рекомендуется для работы использовать редактор кода Visual Studio Code. Проект настроен для получения наилучшего опыта именно в нём. Другие редакторы тоже могут подойти, но настраивать их интеграцию с правилами проекта нужно будет самостоятельно.
Расширения VSCode для полноценной работы с проектом
Структура проекта
На проекте используется VueJS 2 и Vue-Router 2. Существует некий список соглашений который необходимо соблюдать при разработке на проекте.
Исходный код проекта находится в папке /src/.
- /src/index.js: Точка входа приложения. В нём происходит подключение всех модулей для инициализации.
- /src/body.vue: Главная страница для разметки. В этом модуле нужно писать код, который попадёт на каждую страницу
- */src/pages/.vue**: Страницы приложение. Это компоненты самого высокого уровня которые будут переключаться между собой при навигации. В них нужно помещать то, что будет попадать в
<body>документа. - /src/сomponents/**/.vue: Папки независимых компонентов приложения. Это компоненты могут быть переиспользованы как на страницах, так и друг в друге.
- /src/styles/typography.css: Файл со стилями типографики. Обычно в нём глобальное оформление по тегам и подключение шрифтов.
- /src/styles/common.css: Файл со стилями общего назначения. Обычно в нём стили, которые не удалось назначить в компонентах.
- /src/router.js: Файл с конфигурацией роутера. Здесь можно настроить какой адрес на какую страницу ведёт. Так же можно более тонко настроить поведение роутера.
Генерация Doctype и <head> документа происходит автоматически и для это не нужно ничего специально указывать.
Структура компонентов
Любые компоненты должны быть реализованы папкой, где внутри минимум существует файл с расширением .vue, который называется точно так же, как и сама папка. Все компоненты размещаются в папке /src/сomponents/. Для быстрого старта был создан пустой компонент /src/сomponents/_blank-component/blank-component.vue. В нём на примере можно увидеть типичную структуру компонента. И его можно использовать в качестве заготовки.
VueJS позволяет писать HTML, CSS, JS в одном файле. Но если в компоненте будут реализованы отдельные CSS и JS файлы, то их нужно называть так же, как и папку, в которой они находятся. Для картинок лучше создать дочернюю папку /images внутри папки компонента.
Запуск с живой перезагрузкой
Текущая реализация инфраструктуры в режиме разработки предполагает запуск на сервере по протоколу HTTP.
Запустите команду:
npm startПосле этого в браузере по умолчанию откроется страница с приложением. Будет запущен сервер работающий в локальной сети. Так же будет активирована автоматическая перезагрузка страниц при изменении исходного кода. Адрес из запущенного браузера можно использовать на любом устройстве внутри сети, чтобы запустить проект на нём. Это удобно для тестирования на реальных мобильных устройствах, например.
Так же присутствует вариант запуска собранной версии проекта. О процессе сборки есть инструкция в этом документе ниже. Собранная версия не имеет ограничений в запуске и может стартовать в любых условиях и в любом браузере. Но надо учесть, что при изменениях исходного кода процесс сборки нужно перезапускать заново.
Статический анализ кода
Статический анализатор кода возможно запустить через интерфейс командной строки. Для этого запустите команду:
npm run lintАнализатор ESLint проверит все файлы *.js в исходном коде и покажет отчёт об ошибках.
ESLint можно установить в качестве расширения для большинства редакторов кода. Т.о., сразу можно увидеть свои ошибки ещё на этапе написания кода. В проект включены локальные настройки для редактора Visual Studio Code. Это облегчит работу с JavaScript, т.к. большинство ошибок в правилах оформления кода будет автоматически исправлено при сохранении файлов.
Тесты
Автоматических тестов нет. Но имеется инфраструктура для написания собственных тестов.
Тесты в командной строке
Запустите команду, чтобы увидеть отчёт по тестам:
npm testС живой перезагрузкой:
npm run test:watchВ этом случае при изменениях в коде тесты будут перезапускаться и показывать новый отчёт в том же окне терминала.
Сборка проекта
Для того, чтобы собрать все модули в один файл и скомпилировать минифицированную версию приложения, можно запустить команду
npm run buildВ корне проекта появится новая папка /build/, внутри которой будет код, созданный из исходных файлов в папке /src/. Процесс сборки объединяет многие файлы в один и применяет к коду оптимизации, уменьшающие его размер.