Три уникальных способа использовать 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-адресов. Да, сосуществование 2-ух «веб-сайтов» может быть непростой задачей. У вас имеют возможность быть конфликты 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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *