SpaceX

pet-project

---

1. Клонирование репозитория
2. Версионность
3. Работа с npm
4. Файловая структура
5. Alias'ы
6. Советы и правила

---

Клонирование репозитория

[email protected]:hellsgor/SpaceX.git

Версионность

• node js - v.18.7.0
• npm - 8.15.0

Работа с npm

• npm i - установка пакетов;
• npm start - запуск dev-сервера;
• npm run dev - сборка билда dev;
• npm run build - сборка билда prod;
• npm run deploy - сборка билда prod и публикация в gitHub Pages.

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

• src/
  • assets/
    • favicon/ - фавиконки;
    • fonts/ - шрифты;
    • icons/ - иконки;
    • images/ - изображения;
    • json/ - для json-файлов;
    • pug/
      • mixins - для pug-миксинов
    • styles/ - основные файлы стилей;
  • components/ - компоненты;
    • common/ - компоненты обязательные для всех страниц;
  • layouts/ - шаблоны страниц;
  • libs/ - библиотеки;
  • pages/ - страницы;
    • _partials/ - части страниц, которые не являются компонентами ввиду отсутствия необходимости в их переиспользовании;
    • main/ - файлы главной страницы;
    • ui-kit/ - файлы страницы uiKit;
  • ui-kit/ - микро-компоненты (кнопки, чек-боксы, инпуты и пр.);
  • utils/ - части js-кода используемые в проекте вынесены в отдельную папку, например, отправка или валидация полей формы и пр.

Alias'ы

• Img - './src/assets/image/';
• Icons - './src/assets/icons/';
• Fonts - './src/assets/fonts/';
• Components - './src/components/';
• Layouts - './src/layouts/';
• UIKit - './src/ui-kit/';
• Styles - './src/assets/styles/';
• Libs - './src/libs/' (на момент публикации не используется);
• NodeModules - './node_modules/';
• Partials - './src/pages/_partials/';
• Utils - './src/utils/';
• Mixins (pug) - './src/assets/pug/mixins/';
• JSON - './src/assets/json'.

Советы и правила

• файлы null следует удалить если в папке-родителе появятся файлы проекта. Файлы "null" требуются исключительно для сохранения файловой структуры в git;
• каждой новой странице после копирования кода pug:
  • в pug изменить:
    • значение переменной header если это необходимо (хедер нужен /не нужен);
    • значение переменной footer если это необходимо (футер нужен /не нужен);
    • значение переменной pageClassName (назначить правильный класс тегу для управления страницей);

Список страниц

• main page - http://localhost:3000