❇️ Шаблон для проекта на vue
О проекте
-
Подготовлено окружение для старта проекта
- Создана удобная структура
scss
файлов - Перменные и миксины можно использовать по всему проекту
- Создана удобная структура
- Создана автосборка через
Github Actions
и публикация в отдельную ветку дляGithub Pages
- Автоматизированы:
- Инициализация
git
- Создание нужных веток для начала разработки
Push
в удаленный репозиторий- Установка пакетов
- Инициализация
Запуск
Локальный
- Клонировать репозиторий шаблона:
git clone https://github.com/ilya-belik/vue-project-layout.git
yarn init-project
Что делает скрипт:
- Удаляет информацию о репозитории проекта и коммитах
vue-project-layout
- Удаляет папку с документацией
- Очищает
README.md
- Инициализирует
git
c веткамиmain
,dev
,build
и коммитом на выбор (по умолчанию -"Init project"
) - Инициализирует удаленный репозиторий
GitHub
(опционально) - Пушит на
GitHub
(опционально) - Ставит зависимости
- Удаляет сам себя
- Запустить проект:
yarn serve
- Билдит локально так:
yarn build
Github Pages
и Github Actions
- Создать репозиторий на
Github
- Создать в репозитории ветки
main
иbuild
Рекомендую создать веткуdev
и заливать изменения в нее, а потом делать пул в main что бы не превысить бесплатный лимит github actions Если проект ининциализировлся скриптом с удаленным репозиторием - этот шаг можно пропустить - Перейти в раздел репозитория
Settings
- В настройках выбрать раздел
Pages
- В разделе
Source
выбрать веткуbuild
- Если у вас появилось зеленое уведомление - все выполнено правильно
Особенности
- Структура
SCSS
Директория | Назначение |
---|---|
base |
включает глобальные стили, такие как сброс стилей, типография, цвета и т.д. |
helpers |
глобальные миксины, функции, вспомогательные селекторы и т.д. |
components |
содержит отдельные компоненты с отдельным файлом .scss для каждого из них. |
layout |
содержит стили для основных компонентов макета, таких как хедер, футер, навигация и т.д. |
pages |
содержит стили, специфичные для отдельных страниц, если это необходимо |
themes |
стили для разных тем. |
vendors |
стили, миксины и прочее от третьих сторон |
main.scss |
выходной файл, в котором объединяются все стили. |
Faq
Как работает Github Pages
и Github Actions
При любом коммите в main вызывается action
./github/workflows/build.yml
Список файлов коммиты в которые action
игнорирует:
.gitignore
.prettierignore
.gitattributes
.prettierrc.json
**.md
**.lock
init-project.sh