templates/vitekit/__/vite-bem-template-main/README.md

vite-bem-template

Установка

• установите Node.js и Yarn: npm install --global yarn
• скачайте сборку в консоли с помощью Git: git clone https://github.com/Apnoea/vite-bem-template.git
• перейдите в скачанную папку со сборкой: cd vite-bem-template
• скачайте необходимые зависимости: yarn
• чтобы начать работу, введите команду: yarn dev (режим разработки)
• чтобы собрать проект, введите команду yarn build (режим сборки)

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.

Файловая структура

vite-bem-template
├── src
│   ├── blocks
│   ├── images
│   ├── js
│   ├── layout
│   ├── pages
│   ├── public
│   │   └── fonts
│   └── styles
├── .change-path.js
├── .create-block.js
├── .create-mixins.js
├── .create-page.js
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .gitlab-ci.yml
├── .prettierrc.json
├── .pug-lintrc.json
├── .stylelintrc.json
├── eslint.config
├── package.json
├── postcss.config.js
└── vite.config.js

• Папка src - используется во время разработки:
  • блоки: src/blocks
  • изображения: src/images
  • JS-файлы: src/js
  • основной макет сайта: src/layout
  • страницы сайта: src/pages
  • шрифты: src/public/fonts
  • SCSS-файлы: src/styles

Команды

• yarn dev - запуск сервера для разработки проекта
• yarn build - собрать проект с оптимизацией без запуска сервера
• yarn block - добавить bem блок
• yarn page - добавить страницу

Рекомендации по использованию

Блоки проекта

• блоки проекта находятся в папке src/blocks
  • блоки, созданные командой yarn block, автоматически подключаются в файл: src/blocks/mixins.pug
• каталог блока содержит в себе файлы разметки, стилей и, по необходимости, скриптов

Страницы проекта

• страницы проекта находятся в корне папки src/pages
• каждая страница представляет собой отдельный каталог, в котором содержится файл index.html и файл шаблона .pug
  • страницы, созданные командой yarn page, автоматически генерируют оба файла и их подключения

Изображения

• изображения находятся в папке src/images
  • изображения автоматически минифицируются с сохранением структуры папок
• из изображений формата .svg формируется спрайт __svg__icons__dom__

Шрифты

• шрифты находятся в папке src/public/fonts
  • используйте форматы .woff2 и .woff
  • шрифты подключаются в файле src/styles/utils/fonts.scss
  • сконвертировать локальные шрифты можно с помощью сервиса

Сторонние библиотеки

• все сторонние библиотеки устанавливаются в папку node_modules
  • для их загрузки воспользуйтеcь командой yarn add package_name
  • для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла, например:

  import $ from 'jquery'
  

  • для подключения стилевых файлов библиотек импортируйте их в файл src/styles/style.scss
  • JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя

Контакты

• Telegram: @Alex K