FrontElf Docs

ViteTemplateHTML

Налаштування проекту

Цей документ описує підключення та використання TailwindCSS, налаштування оптимізації зображень та стилів.

Налаштування:

Налаштування збірки здійснюються в файлі template.config.js в корені проекту.

// template.config.js

export default {
   ViteTemplateHTML: true,
   isSessions: true,
   isQrcode: false,
   isMinify: true,
   // Чи використовується PHPMailer, чи підіймати PHP сервер
   isPHPMailer: false,
   isInlineSprite: false,
   // false | 'dev' | 'all'
   componentsTrace: 'dev',

                
   styles: {

                
      tailwind: true,

                
      pxToRem: true,

                
      sizeToRem: 16,

                
      sortMediaQuery: true,

                
      sortType: 'desktop-first',

                
      critical: false,

                
   },

                
   imgQuality: {

                
      ...Налаштування оптимізації JPEG, PNG, WEBP

                
   },

                
   HTMLVariables: {

                
      ...Глобальні HTML змінні

                
   },

                
   templatePlugin: {

                
      componentsDirectory: 'src/html/components',

                
      componentsWarning: true,

                
      componentsPath: true,

                
   },

                
   devNavigation: { isShow: true },

                
   PHPserver: {

                
      ...Налаштування PHP сервера

                
   },

                
   aliases: {

                
      ...Налаштування псевдонімів (аліасів)

                
   },

                
}

                

              

            

          


          

            

              
Трасування компонентів:

              

                Параметр componentsTrace додає HTML-коментарі навколо зрендерених компонентів, щоб у devtools було видно, з якого файлу прийшов фрагмент.
              

              

                
componentsTrace: false  // вимкнено

                
componentsTrace: 'dev'  // тільки dev-режим

                
componentsTrace: 'all'  // dev і production build

                

                
<!-- fe-component-start: Header | .../Header.html | depth:0 -->

                
<!-- fe-component-end: Header | .../Header.html | depth:0 -->