В этой статье предполагается, что вы знакомы с Vue

(API композиции с версией Typescript скоро появится)

На прошлой неделе я написал статью о том, как я предпочитаю использовать таблицы поиска при работе со стилями динамических компонентов в Nuxt, которую вы можете найти здесь. На этой неделе я работал с Vue 3 и, как и при использовании Nuxt, во Vue я использую таблицы поиска при работе со стилями динамических компонентов, вот как:

Попутный ветер и PurgeCSS

Tailwind CSS - одна из самых горячих тем в фронтенд-разработке прямо сейчас. Первый CSS-фреймворк, созданный Адамом Уотаном, который за последние несколько лет превратился из побочного проекта в успешный бизнес. Если вы когда-либо использовали Tailwind, вы, возможно, знаете, что он использует PurgeCSS во время сборки для удаления неиспользуемых стилей и создания тонкой таблицы стилей, состоящей только из классов, используемых в вашем веб-приложении. Многие фреймворки теперь используют PurgeCSS для удаления ненужных массивов из рабочих таблиц стилей во время сборки.

PurgeCSS - фантастический плагин, однако он не может анализировать или запускать JavaScript и в большинстве случаев используется только во время сборки. Из-за этого при неправильном использовании это может привести к неожиданным несоответствиям между средой разработки и производственной средой.

Запуск нового проекта Vue с Tailwind CSS

Давайте начнем с создания новой установки Vue, открыв терминал и выполнив следующую команду:

vue create <your-project-name>

Мы будем следовать инструкциям интерфейса командной строки, чтобы настроить проект Vue 3 по умолчанию. После завершения настройки нашего проекта мы можем перейти в корневой каталог и установить Tailwind CSS с помощью следующей команды:

npm install tailwindcss

После успешной установки Tailwind CSS нам нужно будет создать tailwind.config.js, используя следующую команду:

npx tailwindcss init

Когда файл tailwind.config.js будет создан, нам нужно будет настроить его для сканирования наших .vue файлов на предмет классов. Сначала раскомментируем свойства объекта future, это упростит обновление в будущем. Затем в массиве purge добавьте следующую строку:

'src/**/*.vue',

Теперь мы можем
создать нашу таблицу стилей Tailwind. Перейдите в папку src/assets, создайте новый каталог с именем css и внутри него создайте новый файл с именем styles.css и заполните его импортированными CSS Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

Теперь, когда таблица стилей настроена, мы можем импортировать ее в наше приложение, открыв файл main.js из каталога src и добавив следующую строку:

import '@/assets/css/styles.css';

Наконец, нам нужно создать наш файл конфигурации PurgeCSS, снова в корне проекта, создать новый файл, на этот раз с именем postcss.config.js, и настроить его с помощью следующего кода:

// postcss.config.js
const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss,
        autoprefixer,
    ],
};

Стили динамических компонентов в Vue с Tailwind

Одна из ключевых особенностей компонентов во Vue - возможность передавать реквизиты. Свойства - это настраиваемые атрибуты, передаваемые компоненту, которые можно использовать для управления внешним видом и функциями. Давайте посмотрим на создание простого компонента кнопки с помощью Tailwind, который принимает два цветовых решения: «основной» и «дополнительный»:

<template>
    <button 
        class="px-4 py-2 text-center transition-colors duration-300 ease-in-out border border-solid rounded shadow-md"
        :class="{ 
            'bg-blue-800 text-white border-blue-800 hover:bg-transparent hover:text-blue-800 hover:border-blue-800' : color == 'primary',
            'bg-transparent text-blue-800 border-blue-800 hover:bg-blue-800 hover:text-white hover:border-blue-800' : color == 'secondary'
        }"
    >
        <slot />
    </button>
</template>
<script>
    export default {
        name: 'component--button',
        props: {
            color: {
                required: false,
                type: String,
                default: 'primary',
                validator: value => {
                    return ['primary', 'secondary'].includes(value)
                }
            }
        }
    }
</script>

Итак, у нас есть компонент кнопки, который принимает 2 динамических цветовых решения, «первичный» и «вторичный», точно так, как мы изложили, однако даже в этом простом компоненте легко увидеть, как эти динамические стили могут выйти из-под контроля в более сложных. компоненты. У нас также есть валидатор цветовых свойств, который мы должны вручную синхронизировать с динамическими стилями в шаблоне.

Извлечение стилей и синхронизация валидаторов с таблицами поиска

Если вы не слышали о таблице поиска, таблица поиска - это простой объект пары ключ-значение, который мы можем использовать для сопоставления ключей с данными. Мы можем использовать таблицы поиска для извлечения динамических стилей и обеспечения того, чтобы наш валидатор всегда оставался синхронизированным с этими динамическими стилями.

В этом примере мы создадим новую папку в src каталоге с именем validators для хранения наших таблиц поиска, хотя при желании можно использовать тот же метод для использования таблиц поиска в файле компонента. После того, как вы создали новую папку с именем validators, создайте внутри новый файл с именем Button.js. Внутри Button.js мы собираемся экспортировать const под названием ButtonColors, таблицу поиска, которая будет содержать наши пары ключ-значение для наших динамических стилей, например:

export const ButtonColors = {
    'primary': 'bg-blue-800 text-white border-blue-800 hover:bg-transparent hover:text-blue-800 hover:border-blue-800',
    'secondary': 'bg-transparent text-blue-800 border-blue-800 hover:bg-blue-800 hover:text-white hover:border-blue-800'
}

Теперь мы извлекли наши динамические стили в таблицу поиска, нам нужно внести несколько изменений в наш компонент, во-первых, под открывающим тегом скрипта, который нам нужно импортировать наш ButtonColors const:

<script>
import { ButtonColors } from '@/validators/Button'
export default {/**/}
</script>

Затем в нашем валидаторе color props замените массив массивом ключей из таблицы поиска ButtonColors:

/**/
validator: (value) => {
    return Object.keys(ButtonColors).includes(value)
},
/**/

Теперь мы можем создать вычисляемое свойство для обработки динамических классов в шаблоне компонента:

<script>
/**/
export default {
    /**/
    computed: {
        buttonColor() {
            return ButtonColors[this.color]
        },
    }
}
</script>

Затем мы можем заменить все динамические классы в шаблоне нашим новым вычисляемым свойством:

<template>
    <button 
        class="px-4 py-2 text-center transition-colors duration-300 ease-in-out border border-solid rounded shadow-md"
        :class="[buttonColor]"
    >
        <slot />
    </button>
</template>

В целом это должно дать нам шаблон компонента, который будет выглядеть так:

<template>
    <button 
        class="px-4 py-2 text-center transition-colors duration-300 ease-in-out border border-solid rounded shadow-md"
        :class="[buttonColor]"
    >
        <slot />
    </button>
</template>
<script>
    import { ButtonColors } from '@/validators/Button'
    export default {
        name: 'component--button',
        props: {
            color: {
                required: false,
                type: String,
                default: 'primary',
                validator: value => {
                    return Object.keys(ButtonColors).includes(value)
                }
            }
        },
        computed: {
            buttonColor() {
                return ButtonColors[this.color]
            },
        }
    }
</script>

Все выглядит отлично, наши динамические стили извлечены, а наши валидаторы будут автоматически синхронизироваться с любыми новыми динамическими стилями, которые мы добавляем, однако, к сожалению, в настоящий момент наш компонент все еще не будет оформлен в соответствии с ожиданиями в производстве. К счастью, есть очень простое исправление: откройте tailwind.config.js из корня проекта и в массиве purge, добавьте 'src/validators/*.js', это скажет PurgeCSS проверить стили в нашей папке валидаторов, наш последний объект purge должен выглядеть примерно так:

module.exports = {
/**/
    purge: [
        'src/**/*.vue',
        'src/validators/*.js'
    ]
/**/
}

Тестирование

Если вы хотите проверить правильность работы справочных таблиц в производственной среде, вы можете протестировать свой проект в производственной среде локально. Начните с установки статического файлового сервера Node.js:

npm install -g serve

После установки перейдите в корень вашего проекта и запустите:

serve -s dist

Вывод

Надеюсь, вы сочли это полезным упражнением по очистке динамических классов в Vue options API, Tailwind и PurgeCSS.

Если вы нашли эту статью полезной, подпишитесь на меня на Medium, Dev.to и / или Twitter.