Главная » Статьи » Три уникальных способа использовать Vue JS с WordPress

Три уникальных способа использовать Vue JS с WordPress

Три уникальных способа использовать Vue JS с WordPress

От автора: как и в случае большинства моих статей, меня вдохновило то, что я увидел в группе Vue JS в Facebook. Кто-то в группе спросил: как я могу использовать Vue в WordPress? Слово «в», а не «с» здесь интересно, потому что на самом деле есть способы использовать Vue в WP и способы использовать его с WP.

Как старший фронтенд-разработчик и бывший разработчик WordPress, я был немного удивлен этим вопросом, потому что ответ казался мне очевидным. Но потом я кое-что вспомнил. Мир веб-интерфейса движется так быстро, что это может быть не так очевидно! Итак, теперь я покажу вам 3 чистых метода использования Vue JS с и в WordPress.

У этих методов разные цели и разные реализации. Я объясню, в каком контексте каждый из них полезен, а в каком — нет. Подождите, а зачем разработчикам Vue использовать WordPress? WordPress представляет более 25% сети интернет. Скорее всего, он у вас будет (или уже есть ) в вашем стеке. Есть 2 основные причины, по которым фронтенд-разработчик использует WordPress:

У вас нет бэкенд-навыков и вам нужен источник данных + админ-панель.

У вас есть клиент, который уже работает на WordPress, и он хочет изменить интерфейс.

Зачем разработчику WordPress использовать Vue? Основная причина в том, что Vue легко изучить! Другие практические причины:

jQuery нелегко масштабировать и во многих случаях он создает конфликты

Использование отдельного интерфейса с WP в качестве API может ускорить работу сайта.

Vue является компонуемым и упростит пользовательский интерфейс в плагинах, админке и т. д.

Использование Vue означает использование преимуществ современного стека в экосистеме WP. Но это может быть любой другой современный компонентный фреймворк. Итак, каковы три основных способа использования WordPress и Vue?

1. Так, вы можете использовать Vue для создания SPA в качестве дополнительного веб-сайта / приложения в адиминистративной панели WordPress. Вы не ожидали, что это произойдет? Да, вы можете использовать Vue для создания «суб-сайта» в панели администратора WordPress.

Зачем вам это делать, спросите вы? Ну, иногда при создании сложных плагинов или просто настраиваемых административных страниц вам нужно создать систему вкладок или многостраничную систему в панели администрирования.

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

Кроме того, при использовании обычных элементов пользовательского интерфейса WP это не всегда элегантно.
Вот пример пользовательской страницы администрирования.

Три уникальных способа использовать Vue JS с WordPress

Это пользовательский интерфейс плагина WP Rocket в панели администрирования WordPress

Как видите, пользовательский интерфейс полностью настраивается и имеет собственные подстраницы в виде вкладок. Каждая вкладка соответствует дополнительному URL-адресу, чтобы можно было легко поделиться им с кем-то другим. Это вроде как мини-сайт в админке WP.

Вы можете легко добиться этого с помощью Vue и Vue-router. Есть только одна сложная часть: обработка URL-адресов. Да, сосуществование двух «веб-сайтов» может быть непростой задачей. У вас могут быть конфликты URL-адресов. Не волнуйтесь, я вам помогу с этим.

Вам нужно изменить только две опции в экземпляре Vue Router:

параметр base: установить значение с пользовательской страницы WP маршрута

параметр mode: установите значение «hash»

Режим «hash» будет использовать хеши вместо изменения полного URL. Также можно, например, заменить страницу редактора контента. Вот что делает редактор Elementor.

Три уникальных способа использовать Vue JS с WordPress

Вот во что превращается обычный редактор WP… (с хешами для дополнительных URL).

Три уникальных способа использовать Vue JS с WordPress

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

Итак, вкратце, вы должны использовать Vue CLI или любой другой инструмент для создания автономного Vue SPA, установить параметр base + mode маршрутизатора на то, что я сказал ранее, экспортировать его, загрузить в WordPress с помощью правильных WP hooks.

2. Используйте Vue для создания повторно используемых компонентов в интерфейсе или в админке.

Чаще всего на веб-сайте у вас будут микровзаимодействия. Такие вещи, как: меню переключателей, выпадающие меню… Это то, что мы можем назвать UI Kit!

Но у вас также могут быть некоторые элементы пользовательского интерфейса, которые асинхронно взаимодействуют с данными: кнопки лайков / голосования, формы, пользовательский медиаплеер …

При использовании Vue в качестве компонентов в WP или любом другом шаблоне серверной части вам может потребоваться использовать версию Vue Runtime + Compiler.

Некоторые компоненты будут взаимодействовать с визуализированными данными, а некоторые — нет. В зависимости от этого вы не будете создавать компоненты одного и того же типа. У некоторых будет собственный шаблон, у других будет использоваться сгенерированная разметка.

Три уникальных способа использовать Vue JS с WordPress

Собственный шаблон

Три уникальных способа использовать Vue JS с WordPress

Использование существующей разметки

Вы даже можете использовать Vue для создания нативных веб-компонентов, которые можно было бы повторно использовать в проектах, таких как ionicons (что сделано с помощью Stencil JS, но вы меня поняли).

Эти компоненты можно использовать либо в шаблонах WP PHP, либо в функциях, возвращающих HTML. Вы можете передавать данные экземплярам или компонентам из WP, преобразовав их в глобальную переменную или напрямую в свойства компонента.

Идея состоит в том, чтобы загрузить Vue и связать экземпляры Vue с идентификаторами HTML.

Три уникальных способа использовать Vue JS с WordPress

Загрузите компоненты vue JS и / или стили

Три уникальных способа использовать Vue JS с WordPress

Верхняя часть находится в ваших шаблонах WP, нижняя часть — ваши скрипты, загруженные с помощью wp_enqueue

3. Используйте Vue для создания отдельного веб-сайта и WP в качестве источника данных.

Последний, но тем не менее важный. Некоторым из вас это может показаться очевидным, но не для всех.

Начиная с версии 4.7 в WordPress есть REST API, поэтому вы можете вызывать определённые методы и получать данные (сообщения, страницы, настраиваемые поля с помощью плагинов…).

Это то, что мы называем Headless CMS. Фактически, эти методы сводятся к большему, чем вы можете себе представить. Ваш отдельный интерфейс, использующий WP REST API, может быть:

Приложение / сайт SPA.

Приложение / сайт SSR.

Статически сгенерированный веб-сайт (JAMStack).

PWA.

Мобильное приложение.

Другой монолитный бэкэнд, использующий более простой / быстрый шаблонизатор.

Короче говоря, любой другой клиент, который может использовать API, и у вас есть полный контроль над интерфейсом.

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

Вы также можете добавить пользовательские конечные точки в API WordPress и использовать систему аутентификации с сгенерированным криптографическим nonce и другими вещами.

Есть ли контекст, в котором не следует использовать Vue + WP?

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

Что вы имеете в виду под «тяжелыми приложениями»?

Я не говорю о сайтах с высоким трафиком или подобных вещах. Я говорю, например о приложениях для социальных сетей. WordPress — это CMS, предназначенная для создания контента.

Конечно, с кучей плагинов вы можете создать социальную сеть, но я бы вам это не советовал. Для меня WordPress и, следовательно, WordPress + Vue отлично подходят для:

Контент-ориентированные веб-сайтов.

Контент-ориентированные веб-приложений.

Блогов / Новостных сайтов.

Сайтов электронной коммерции (Woocommerce также имеет REST API)

Портфолио / сайт Showase.

Корпоративных сайтов / Деловых сайтов.

Сайтов с частным контентом (что-то вроде сайтов с платным доступом)

Простых приложения SaaS (простая версия onlyfans или patreon)

В двух словах: все, что может содержать публичный или частный контент. Однако реализации «бесконечны». Вам решать, какие у них плюсы и минусы. При этом у меня есть еще больше практических примеров, чтобы показать вам, но эта статья была бы еще длиннее.

Автор: @maisonfutari

Источник: itnext.io

Редакция: Команда webformyself.