Учебник о том, как быстрее оформить свой веб-сайт 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:
- Вы можете сопоставить вложенные файлы в шаблон.
- Стиль глобальные селекторы.
- Определите пользовательские экраны.
- Добавьте собственные макросы, например
ml:20px
для поля слева. - И многое другое.
Не стесняйтесь проверить документы, чтобы узнать больше.
Оставайтесь на связи:
👉 @8machy
👉 @stylifycss
👉 stylifycss.com
👉 dev.to/machy8
👉 medium.com/@8machy
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.