Учебник о том, как быстрее оформить свой веб-сайт Vue.js с помощью Stylify CSS.

Стилизация + Vue.js + Vite. Стилизуйте свой веб-сайт Vue быстрее с помощью Stylify. Не изучайте селекторы, синтаксис и документацию. Используйте чистый синтаксис CSS и получайте сгенерированный CSS с расширенной оптимизацией для производства.

Для более легкого старта вы можете посетить Игровую площадку Stylify Stackblitz 🎮.

💎 Стилизация введения

Stylify динамически генерирует CSS на основе того, что вы пишете. Синтаксис аналогичен CSS property:value. Определенные утилиты комбинируются с селекторами компонентов и в производственной среде минимизированы до минимума, например, от .color\:red,.button {color:red} до ._zx,._ga{color:red}.

Stylify позволяет вам получать очень маленькие пакеты, генерировать дополнительные куски CSS с отложенной загрузкой и стилизовать страницу, написав HTML и селекторы 🤟.

🚀 Настройка Vue.js

Самый простой способ настроить Vue.js — использовать CLI:

  • Беги yarn create vite app
  • Выберите vue
  • Затем cd app

Таким образом вы получите скелет приложения Vue.js по умолчанию.

🔌 Стилизация интеграции

Установите пакет @stylify/unplugin с помощью NPM или Yarn:

yarn add @stylify/unplugin
npm i @stylify/unplugin

Откройте vite.config.js и скопируйте в него следующее содержимое:

На последнем шаге откройте src/main.js и добавьте путь к stylify.css:

Стилизация веб-сайта

Если вы скопируете приведенный ниже код в src/App.vue и запустите yarn dev, вы получите стилизованный текст Hello World! 🎉:

Stylify отслеживает любые изменения в файлах, соответствующие маске в пакетных файлах, и генерирует CSS в файле src/stylify.css.

Если вы добавите, например, color:blue, CSS будет автоматически обновлен.

Попробуйте Stylify прямо на Stackblitz.com 💡.

Компоненты

Чтобы не раздувать шаблоны с утилитами, вы можете использовать компоненты прямо в файлах, где они используются через параметры контента (ожидает объект JavaScript без скобок) или в конфиге компилятора.

Переменные

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

Здание для производства

Если вы запустите yarn build + yarn preview, разметка Vue.js будет искажена следующим образом:

CSS тоже укорочен:

Настройте все, что вам нужно

Приведенные выше примеры не включают в себя все, что может сделать Stylify:

Не стесняйтесь проверить документы, чтобы узнать больше.

Оставайтесь на связи:

👉 @8machy
👉 @stylifycss
👉 stylifycss.com
👉 dev.to/machy8
👉 medium.com/@8machy

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.