вступление
Команда и сообщество Nuxt недавно выпустили обширный Обозреватель модулей Nuxt, который позволяет сортировать модули Nuxt по популярности, типу и звёздам Github.
Пока я не увидел этого проводника, я понятия не имел, насколько надежной стала экосистема Nuxt Module. Мне удалось найти несколько действительно полезных модулей, которые я использовал в этом и других проектах.
Список может быть довольно сложным (в отличном смысле), поэтому я решил, что свел его к пяти, которые мне очень помогли. Я бы рекомендовал не только эти только, а всего пять, которые я считаю отличными!
TL: DR: Просто покажите мне модули!
1. Nuxt / Content
Создавая этот сайт, я знал, что мне нужно найти автономную CMS для управления моим контентом. Я хотел создавать свой контент в Markdown, интерполировать компоненты Vue и иметь возможность передавать его в систему контроля версий. В содержимом Nuxt есть все это и многое другое!
Вот некоторые из самых приятных функций, которые я обнаружил:
- Возможность вставлять любые переменные в статью с помощью фронтальной части YAML.
- Переменные автоматической инъекции
createdAt
,updatedAt
иtoc
(оглавление) для использования - «Дважды щелкните», чтобы редактировать прямо на странице, и сразу же увидите, как изменения отражаются.
- Возможность интерполировать компоненты Vue прямо в уценку
В этом модуле гораздо больше возможностей, но я не могу его рекомендовать!
2. Nuxt / Попутный ветер
Если вы занимаетесь Front-end веб-разработкой, вы наверняка слышали о TailwindCSS. Если вы не знакомы, это CSS-фреймворк, ориентированный на полезность, с бесконечным количеством настроек и продуманными настройками по умолчанию. Если вы похожи на меня, то знаете, что однажды попробовав, назад уже не вернуться.
Этот модуль упрощает запуск и запуск Tailwind с вашим проектом Nuxt, а также позволяет ссылаться на конфигурацию Tailwind непосредственно в вашем приложении. Он также очень хорошо работает с Темным режимом и нашим следующим модулем в списке ...
3. Nuxt / Цветовой режим
Этот модуль позволяет невероятно легко определить предпочтительную цветовую схему пользователя при первом посещении или переключить и сохранить свой выбор для последующих посещений страницы. Он также очень хорошо работает с Nuxt / Tailwind.
Вы можете читать $colorMode.preference
прямо в своих шаблонах или компонентах и отображать различный контент в зависимости от их текущих предпочтений, а изменить их настройки цветового режима так же просто, как вызвать функцию toggle
, подобную этой:
<template>
<button @click="toggleColorMode">Toggle Color Mode</button>
</template>
<script>
export default {
methods: {
toggleColorMode() {
this.$colorMode.preference = this.$colorMode.value == "light" ? "dark" : "light";
}
}
}
</script>
4. Nuxt / Cloudinary
Один из самых простых способов повысить производительность вашего веб-сайта - оптимизировать изображения. Nuxt / Cloudinary делает это тривиальным.
Cloundinary - это решение для управления графическим и видеоконтентом (с очень щедрым бесплатным тарифным планом). Сервис предоставляет возможность оптимизировать изображения на лету с помощью мощных преобразований и даже возможность добавлять текстовые наложения к изображениям.
Майя Шавин поддерживает этот удивительный Модуль, который почти похож на волшебство. Модуль вставляет Cloudinary Instance ($ cloudinary) в ваш проект Nuxt, который вы можете использовать для некоторых действительно эффективных вещей.
Вы можете получать изображения или видео, хранящиеся в вашем экземпляре Cloudinary, и выполнять преобразования.
const url = this.$cloudinary.image.url('sample', { crop: 'scale', width: 200 })
Вы даже можете получать удаленные изображения и выполнять те же преобразования.
const url = this.$cloudinary.image
.fetchRemote(
'https://icatcare.org/app/uploads/2018/07/Thinking-of-getting-a-cat.png',
{ crop: 'scale', width: 200 })
Модуль также предоставляет несколько готовых компонентов Vue, которые вы можете использовать в любом месте своих шаблонов. Это поистине волшебство!
5. Nuxt / feed
Этот модуль поможет вам создать канал RSS, Atom или JSON из содержимого вашего веб-сайта!
Вы можете подумать, а люди все еще используют RSS-каналы? Что ж, Крис Койер (основатель CSS Tricks и CodePen) делает!
Кто будет читать ваш личный блог, если в нем есть RSS-канал? Я буду читать ваш личный блог, потому что в нем есть RSS-канал. Pic.twitter.com/mtcyKhEVet
- Крис Койер (@chriscoyier) 7 января 2020 г.
Основная причина, почему это так здорово для меня, заключается в том, что если вы решите разместить кросс-пост на платформе, такой как Dev.to, вы действительно можете предоставить URL-адрес RSS-канала, и весь ваш контент станет черновиками, которые вы можете немедленно опубликовать. Хорошо известно, что кросс-публикация контента, изначально опубликованного на вашем сайте, может творить чудеса для вашего SEO-рейтинга (при условии, что вы определите правильный канонический URL для своего контента).
Кроме того, если вы используете Nuxt Content, вы можете сгенерировать канал, используя несколько методов, описанных в официальной документации!
Подведение итогов
Как я уже говорил, есть тонны потрясающих модулей, и это всего пять, которые мне действительно нравятся.
На момент написания этого блога в настоящее время доступно 146 модулей Nuxt для использования на modules.nuxtjs.org (и многие другие просто необходимо объединить с сайтом). Идите вперед, посмотрите и найдите то, что звучит интересно или полезно.
Развлекайтесь, исследуя удивительный мир модулей Nuxt!
Спасибо за прочтение.
Первоначально опубликовано на https://davidparks.dev 29 октября 2020 г.