Использование кладки с Vue для WordPress

Автор оригинала: LAU TIAM KOK.

Проблема

Следуя на этом посте, Создание бесконечного свитка с Vue для WordPress , вы можете использовать Кладка с Vue. Проблема в том, что вы не можете использовать Кладка непосредственно с Vue. Есть пакет NPM, который вы можете использовать для преодоления проблемы – Vue-Mashonry Отказ

Тем не менее, есть проблема с Vue-Mashonry В моем рабочем процессе:

events.js:183
      throw er; // Unhandled 'error' event
      ^
SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'

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

Решение

Итак, решение – скопировать весь код JS в Vue-Mashonry в мой локальный код JS, создавая новый файл – /modules/grid/index.js и вставляя код там. Это не длинный код, поэтому я думаю, что это нормально.

Тогда в моем главном файле JS – app.js Я просто импортирую этот локальный модуль в:

import {VueMasonryPlugin} from './modules/grid/index'
Vue.use(VueMasonryPlugin)

Тебе не нужно ничего делать дальше после этого. Все, что вам нужно сделать сейчас, добавляют Директива Vue-Masonry в вашем Vue шаблоне.

Вариант

Ниже приведен то, что я имею в файле PHP в My WordPress Custom Theme для рендеринга данных из API WordPress:

Что нужно обратить внимание на добавление v-masonry На верхний уровень вашего HTML-элемента и добавления V-Masonry-Tile к элементу, который вы хотите зацикливаться.

Кроме того, не забудьте добавить Предмет Класс к элементу, который вы хотите зацикливаться:

CLASS = “BACE-3 MILED-4 SMALL-6 элемент сотовой карточки клеток”

Мы должны получить этот макет на экране браузера:

Заключение

Вы можете скачать весь исходный код выше здесь Установите его и запустите его с местного компьютера и посмотрите, как он работает.

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