Создание плагина Wordpress + Vue. Введение.

Как работает Wordpress плагин с Vue приложением

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

В итоге у нас будет некая вкладка, в которой будут выводиться следующие пункты меню: контакты, списки и товары. Обратите внимание, что когда я перехожу на списки, у меня страница отображается без перезагрузки, этой страницы, то есть мы физически не переходим на другие страницы. Мы работаем, как бы, Single Page Application, то есть одностраничное приложение. У нас есть одна страница, на которой мы работаем.

Мы можем создать неограниченное количество роутов, путей, для которых мы будем таким образом внедрять какую-то логику для этого плагина. 

Задача этого видео не показать разработку каких-то сложных плагинов. Задача этого видеокурса показать вам основной алгоритм, как вы можете создать такую заготовку, как внедрить Vue фреймворк в WordPress plugin.

Внедрение Vue в метабоксы Wordpress

Кроме того, если мы с вами будем редактировать наши записи, обратите внимание на этот метабокс. Содержимое этого метабокса внедряется с помощью View приложения. То есть плагин подключает соответствующий компонент из Vue приложения и подключает его сюда.

Вы будете вести разработку во Vue приложения, а WordPress уже будет отображать конечную сборку.

Development окружение через ngrok

Кроме того, я покажу, как можно с помощью такой утилиты как ngrok прокидывать локальный сервер для разработки Vue, чтобы мы могли с вами вести разработку не каждый раз компилируя в папку dist и соответственно закачивать её в папку с плагином. Посмотрим вариант, как можно с помощью этой утилиты обойти проблему и вести разработку соответственно в режиме сервера для такого плагина.

Немного по структуре проекта. Я расположил Vue plugin в папке с WordPress проектом. Но это делать не обязательно, можно располагать его отдельным проектом. Но для удобства, просто если у меня есть возможность, я расположил его в этой же папке.

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

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