77 подписчиков

Стартовый шаблон для Vue проекта

9 апреля 20219 апр 2021

9 мин

Оглавление

Фичи
Запуск проекта
Через докер

Бойлерплейт со всем необходимым функционалом

При старте проекта на vue я постоянно сталкивался с тем, что приходилось снова и снова настраивать стор, добавлять базовую структуру стилей, искать пакет иконок, настраивать нормальный линтер и т.д. Это отнимало достаточно времени. Что уж говорить о человеке, который только начал копаться во всем этом?! Там бывает и недели мало.

Vue Mad Boiler поможет избавить вас от этой суеты, дав готовый, настроенный проект.

Ссылка на бойлер: https://github.com/maddevsio/vue-madboiler

Фичи

Функционал обработки JWT токенов;
Пример настроенного стора, где применяется модульный подход;
Очень злой линтер. Поругает за стили, верстку и скрипты;
Само собой тесты, которые генерят отчет о покрытии кода;
Готовая структура папок. Не нужно ничего придумывать;
Очень крутой пакет Material иконок;
Vuetify – фреймворк готовых ui элементов;
Базовая структура scss стилей;
Пример директивы, которая добавляет анимацию волны для кнопок;
Настройка мультиязычности;
Пример сервиса для работы с localstorage;
Настройки роутера + middleware.

Запуск проекта

Через докер

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

Для этого потребуется установить только Docker и Docker compose .

Запускаем проект для разработки

После того как докер соберет контейнер, сайт будет доступен по ссылке http://localhost:8080

Настройки докера для разработки можно посмотреть в Dockerfile.dev и в docker-compose.dev.yml

Без докера

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

Установим зависимости

Запускаем сервер

Если всё установилось и нормально запустилось, то в консоли будет такая картина

Там можно заметить две ссылки:

http://localhost:8080 – ссылка, по которой будет доступен наш сайт
http://192.168.20.242:8080 – по этой ссылке тоже будет доступен сайт, но так им можно делиться внутри сети (под одним wifi), например, для того чтобы тестировать на телефоне или у друга на ноуте. Первая же ссылка будет работать только на вашем ПК

Функционал JWT Token

Для работы с JWT Token использован HTTP client axios .

Функционал реализован в файле /api/config.js

REFRESH_URL – эндпоинт, по которому будет происходить запрос на обновление Access-token RESPONSE_ACCESS_PARAM – название ключа, по которому Access token будет сохраняться в local storage RESPONSE_REFRESH_PARAM – название ключа, по которому Refresh token будет сохраняться в local storage DEFAULT_URL – дефолтный URL, по которому будет производиться запрос в случае, если process.env.REACT_APP_API_URL будет пустой

Описание :

Access-token – это токен, который предоставляет доступ его владельцу к защищенным ресурсам сервера Refresh-token – это токен, позволяющий клиентам запрашивать новые access-токены по истечении их времени жизни.

Клиент проходит аутентификацию в приложении;
В случае успешной аутентификации сервер отправляет клиенту access- и refresh-токены, которые сохраняются в Local Storage по ключам RESPONSE_ACCESS_PARAM и RESPONSE_REFRESH_PARAM;
При дальнейшем обращении к серверу клиент использует access-токен. Сервер проверяет токен на валидность и предоставляет клиенту доступ к ресурсам;
В случае если access-токен становится не валидным, клиент отправляет refresh-токен (по URL указанному в REFRESH_URL), в ответ на который сервер предоставляет два обновленных токена (которые обновляются в Local Storage);
В случае если refresh-токен становится не валидным, то происходит удаление токенов из Local Storage, и клиент опять должен пройти процесс аутентификации.

Имеются методы :

queryGet – Используется для get запросов к серверу, где первым параметром отправляется URL, вторым параметры запроса

queryPost – Используется для post запросов к серверу, где первым параметром отправляется URL, вторым данные, передаваемые на сервер, третьим параметры запроса

Возможно добавление собственных запросов, либо создать новый instance axios.create.

Sentry

Sentry – сервис для удаленного мониторинга ошибок в веб приложениях.

Первым делом

Идём на сайт https://sentry.io и авторизуемся;
Создаём новый проект https://docs.sentry.io/product/sentry-basics/guides/integrate-frontend/create-new-project/ ;
После этого шага у вас в распоряжении окажется dns url , который добавим в настройках в файле main.js ;
Перезапускаем проект. По идее все настроено и готово к отлову ошибок.

Параметры

dns – урл, на который будут отправляться ошибки. Его получите при создании нового проекта в Sentry;
tracesSampleRate – количество отправляемых ошибок в процентном соотношении от 0 до 1. Если нужно отправлять 40% транзакций – укажите 0.4.

Gitlab pages

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

Конечно, есть куча разных вариантов, но мы остановились на Gitlab pages:

https://madboiler.gitlab.io/frontend/vue-madboiler/

В файле vue.config.js добавили функцию, которая определяет правильный путь к файлам в gitlab. Но вам нужно обязательно переписать его под свой проект, так как пути могут быть разные.

Ну или использовать другой вариант для хостинка вашего проекта.

Чтобы это всё завелось на gitlab, был добавлен файл .gitlab-ci.yml . В нём можно найти блок кода, который отвечает за развертывание страницы

Последняя строчка кода говорит о том, что страница будет обновлена только в том случае, если изменения будут залиты в ветку master.

Генерация ковредж баджей для юнит тестов

Понимать какой процент кода покрыт тестами всегда хорошо. Это как минимум показывает, насколько проект стабилен.

Чтобы это было хорошо видно, был добавлен скрипт для генерации баджей, который отображают процент покрытия.

Команда для генерации баджей

Но нужно понимать, что для генерации баджей нужно обязательно запустить команду, которая создаст папку coverage с нужными файлами.

Для этого в файле package.json добавили скрипт, который запускает и то и другое

После запуска команды баджи будут лежать в папке public .

Документирование компонентов

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

@vuedoc/md библиотека, которую будем использовать для документирования компонентов.

Вот пример доки для vuetify button

Установка vuedoc

Чтобы можно было вызвать команду vuedoc.md , нужно обязательно установить этот пакет глобально.

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

Теперь, мы можем документировать компоненты.

Вот несколько примеров: https://gitlab.com/vuedoc/md/-/tree/master/test/fixtures

После того как описали один из компонентов, можно запускать команду и смотреть результат. Только не забудьте поправить команду под вашу структуру файлов и папок.

Тестирование проекта

В проекте доступно три вида тестов

Unit – ими будут тестироваться конкретные функции в коде, чтобы понимать, что они работают так, как ожидается.
Component – тестирование отдельных компонентов, например, дропдаун. Можно проверить, что при нажатии на него выпадает список или при нажатии на элемент списка он выделяется и т.д.
Integration – этими тестами уже проверяется вся связка, то как оно работает вместе.

Mock server

Чтобы тесты не зависели от реального сервера, который может отказать в любую секунду, был добавлен mock server, с возможностью подмены запросов. Таким образом мы сможет тестировать проект даже без доступа в интернет.

В этом нам поможет son-server

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

Файлы для сервера находятся в папке /tests/server .

Файл server.js – это основной файл для запуска сервера.
Файл config.js – файл с опциями для сервера.
Папка data – хранит файлы с тестовыми данными, которые будут возвращены json-сервером. Все данные в файлах могут быть изменены.

Запуск сервера

Оригинальная команда для запуска ` json-server --watch ./tests/server/server.js`

Сервер запустится на локальном хосте и будет доступен по адресу http://localhost:8888 .

В консоли должен быть виден следующий результат:

Unit тесты

Для запуска unit тестов используется vue-cli-service , который уже полностью настроен и готов к работе.

Имеем две команды

Запуск тестов

Тесты располагаются в папке /tests/unit .

Генерация отчета о покрытии кода тестами

После запуска команды в корне проекта создастся папка /coverage , в которой будет лежать отчет. При этот будут сгенерированы баджи, о которых можно почитать тут

Чтобы посмотреть отчёт, перейдем в папку /coverage/lcov-report и найдем там файл index.html . Этот файл нужно запустить в браузере. Откроется страница с подробной инфой о покрытии кода тестами.

Интеграционные и Компонентные тесты

Для этого вида тестов используем фреймворк cypress .

Для тестирования конкретных компонентов используем экспериментальную библиотеку https://docs.cypress.io/guides/component-testing/introduction.html#What-is-Cypress-Component-Testing .

Команда для запуска:

После выполнения этой команды:

Запустится mock server
Запустится сервер для интеграционных и компонентных тестов
Открывается окно со списком всех тестов, которые можно запустить и видеть процесс.
Далее можно приступать к написанию тестов.

Папки и файлы

Интеграционные и Компонентные тесты находятся в папке /tests/e2e .

/tests/e2e/components – эта папка предназначена для компонентных тестов.
/tests/e2e/integrations – эта для интеграционных.
Больше информации о папках и файлах можно найти здесь https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Plugin-files .

Настройка

Файл настроек cypress.json находится в корне проекта.

Обо всех доступных настройках можно прочитать здесь https://docs.cypress.io/guides/references/configuration.html#Options .

Запуск тестов в докер контейнере

Если получаем такую ошибку, то

В консоли запустим эту команду

Результат должен быть таким

По идее дальше всё должно запустить

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

Линтер

Для того чтобы проект был всегда написан так сказать “одним почерком”, в проекте необходимо использовать линтер. Это позволит сделать код единообразным и удобным для восприятия вам и другим разработчикам.

В качестве линтера используется eslint с пресетом airbnb .

Команда ниже запустит проверку .vue, .js, .scss файлов. Также во .vue файлах будет проверен блок <style></style> .

Настройки для .vue, .js файлов можно посмотреть в .eslintrc.js Настройки для .scss файлов в .sass-lint.yml