93 lines
5.0 KiB
Markdown
93 lines
5.0 KiB
Markdown
# vite-bem-template
|
||
|
||
## Установка
|
||
* установите [Node.js](https://nodejs.org/en/) и [Yarn](https://yarnpkg.com/en/docs/install): ```npm install --global yarn```
|
||
* скачайте сборку в консоли с помощью [Git](https://git-scm.com/downloads): ```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```
|
||
* используйте [форматы](https://caniuse.com/#search=woff) ```.woff2``` и ```.woff```
|
||
* шрифты подключаются в файле ```src/styles/utils/fonts.scss```
|
||
* сконвертировать локальные шрифты можно с помощью [сервиса](https://transfonter.org/)
|
||
|
||
### Сторонние библиотеки
|
||
* все сторонние библиотеки устанавливаются в папку ```node_modules```
|
||
* для их загрузки воспользуйтеcь командой ```yarn add package_name```
|
||
* для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла, например:
|
||
```javascript
|
||
import $ from 'jquery'
|
||
```
|
||
* для подключения стилевых файлов библиотек импортируйте их в файл ```src/styles/style.scss```
|
||
* JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя
|
||
|
||
## Контакты
|
||
* Telegram: [@Alex K](https://t.me/Apnoea)
|