public
- в этом разделе находятся статичные ассеты(пока только изображения)src
- основной рабочий каталогassets
- каталог для ассетов которые необходимо каким-либо образом трансформироватьfonts
- каталог для шрифтовimages
- каталог для изображений (пока не используем)svg
- каталог для шрифтов (пока не используем)
components
- каталог для компонентов, используется posthtml-componentslayouts
- каталог для шаблонов страницpages
- каталог для страницscripts
- каталог для js файловstyles
- каталог для css файлов
tailwind.config.js
- файл конфигурации Tailwindcssvite.config.js
- файл конфигурации Vite
В данном каталоге можно создавать необходимую структуру для использования в шаблонах, страницах и других компонентах.
Правила формирования имени компонента строится по следующему принципу:
/src/components/global/Hero.html
- компонент с именем <c-global.Hero></c-global.Hero>
/src/components/share/Card.html
- компонент с именем <c-share.Card></c-share.Card>
/src/components/custom/Divider.html
- компонент с именем <c-custom.Divider></c-custom.Divider>
и т.д.
Таким образом если создать директорию global
и поместить в нее компонент Hero.html
он будет доступен глобально по проекту по имени <c-global.Hero></c-global.Hero>
Шаблон страницы выглядит следующим образом:
<extends src="layouts/main.html" locals='{ "title": "", "bodyClass": "" }'>
<block name="body">
<!-- ТУТ ПОДКЛЮЧАЕМ СВОИ КОМПОНЕНТЫ -->
<c-global.Hero></c-global.Hero>
<c-share.Card></c-share.Card>
<!-- И т.д. -->
</block>
</extends>
- Атрибут
locals
объект, который передается вlayout
и расширяет его собственными значениями
npm run dev
- запустить в режиме разработки
npm run build
- запустить сборку проекта
npm run preview
- запустить проект после сборки