В этой статье предполагается, что вы знакомы с 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.