Шаблон для PWA/SSR/SSG/Hybrid приложений на основе Nuxt.js
- Расширение архитектуры Nuxt.js MVVM + Clean Architecture
- Использования DI для доступа к модулям
- Поддержка TypeScript
- Встроенный CLI для генерации документации
- Поддержка Docker для разработки и продакшна
- Интеграция с Capacitor.js для сборки гибридных приложении
- Библиотека компонентов Rocket Firm UI
Ознакомиться с докуемнтацией данного шаблона можено в Rocket WIKI по ссылке
Для запуска проекта в докер контейнере в режиме разработки
yarn docker:dev
Для запуска продакш версий веб-приложения
yarn serve:prod
Для запуска документации
yarn serve:docs
Для сборки проекта
yarn build
Для запуска iOS версий в XCode
yarn run:ios
Для запуска Android версий в Android Studio
yarn run:android
Для сборки Android версий
yarn build:android
Для сборки проекта
yarn build
В шаблоне присутствуют команды для генерации boilerplate файлов для ускорения процесса создания:
Для генерации Vue компонентов
yarn create-component
Так как в шаблоне используется компонентная структура Atomic Design, то команда запросить какого типа компонент требуется сгенерировать.
Для генерации компоненты-страницы
yarn create-page
В шаблоне все наследуется от стандартного Nuxt.js
. Однако, в шаблоне присуствуют некоторые архитектурные паттерны:
models
- дирректория, которая хранит в себе структуры данных или их типы/интерфейсы/абстракцииrepositories
- дирректория, которая хранит в себе классы, которые делают запросы по API. Для HTTP запросов внутри есть базовый NetAPI класс, который по DI принимает Http клиент и делает запросы по внешним API. Также есть базовый LocalAPI, который записывает или берет данные с локального хранилища. Для работы с последующими репозиториями, надо наследоваться от одного из базовых классов.services
- дирректория, которая хранит в себе классы, которые производят какие либо вычесления, или служат оберткой для сторонних зависимостей.
Также, в шаблоне структурированы компоненты по Atomic Design. Компоненты деляться на:
/atoms/*
– тут расположены примитивные компоненты: кнопки, заголовки, поля ввода и пр./molecules/*
– тут расположены связки/группы примитивов: группы кнопок, карточки и пр./organisms/*
– тут расположены связки/группы молекул. То есть компоненты, которая состоит из молекул, которые состоят из примитивов: шапка, списки карточек, модальные окна и пр./templates/*
– тут расположены шаблоны страницы
Подробнее можно почитать:
Использовать VueStyleGuidist
пример оформления документирование компонента:
<template>
<button class="Button" @click="handler">
<!-- @slot default slot for button content -->
<slot></slot>
</button>
</template>
<script>
/**
* The only true button.
* @displayName BestButton
*/
export default {
name: 'Button',
props: {
/**
* The color for the button.
*/
color: {
type: String,
default: '#333',
},
/**
* The size of the button
* @values small, normal, large
*/
size: {
type: String,
default: 'normal',
},
},
methods: {
handler(e) {
/** click event */
this.$emit('click', e)
},
},
}
</script>
Для того чтобы запустить документацию используйте команду: yarn serve:docs
или yarn build:docs
для билда
Проект обернут в докер для сборки и запуска продакшн версий проекта на сервере, то есть для облегчения деплоя посредством CI/CD
Команды для запуска контейнера:
docker-compose build --no-cache
- сборка контейнера без использования кэшаdocker-compose up
- поднятия контейнера
В корне можно найти пример конфигурации GitLab CI/CD в файле .gitlab-ci.example.yml
Для корректной работы надо в репозиторий GitLab надо иметь следуюшие переменные:
$PRIVATE_KEY
- ключ для ssh доступа к серверу$DEV_USER
- имя пользователя для доступа$DEV_HOST
- имя хоста