В этой статье я покажу вам, как использовать Vue.js для создания одностраничного приложения SPA (одностраничное приложение) в WordPress: использовать WordPress в качестве серверной службы для предоставления данных и использовать Vue.js для получения данных для внешнего интерфейса. окончание рендеринга.
Мы будем использовать REST API WordPress (который предоставляет стандартный RESTFul-интерфейс для внешнего мира) и Vue.js (прогрессивный JavaScript-фреймворк). Если вы еще не использовали Vue.js или другие фреймворки JavaScript, это отличная возможность начать.
Напоминание: эта статья предназначена для опытных разработчиков WordPress. Я предполагаю, что вы знакомы с PHP, JavaScript и WordPress REST API. Если вы новичок в этих областях, рекомендуется сначала прочитать следующие руководства:
Мы будем использовать множество функций Vue.js, таких каккомпонент одного файла,обработка событий,вычисляемое свойство, жизненный цикл, а также использует библиотеку Axios для взаимодействия с WordPress REST API. Неважно, если вы не знакомы с ним, вы можете изучить следующие учебные пособия, чтобы быстро приступить к работе:
Хотя приложения Vue.js можно писать с синтаксисом ES5, я буду использовать некоторые новые функции ES6 и ES7.Если вы хотите быстро изучить синтаксис ES6, вы можете ознакомиться со следующими руководствами:
Выбор Vue.js или других фреймворков JavaScript в основном зависит от ваших собственных потребностей и технических предпочтений.Цель этой статьи — использовать практические примеры, чтобы вы могли изучить возможность сочетания WordPress и интерфейсных одностраничных приложений. Теперь давайте начнем!
Обзор: Как разработать одностраничное приложение Vue в WordPress
Я разработал простое одностраничное приложение с функцией поиска в WordPress, используя Vue.js и дочернюю тему темы Twenty Seventeen, кодРазмещено на GitHub, вы можете скачать его и просмотреть код, читая эту статью.
Одностраничное приложение (SPA) может быть смонтировано на любой странице (странице) WordPress, если на странице WordPress указан конкретный настраиваемый шаблон страницы (Custom Page Templates), основная функция этого пользовательского шаблона страницы — предоставить элемент DOM, который используется в качестве точки монтирования для экземпляра vue.
Объединение Vue.js с WordPress с пользовательскими шаблонами страниц
Наш SPA использует гибридную архитектуру. Серверная программа WordPress обеспечивает как внутренние службы, так и внешний рендеринг (например, макет и темы). Часть данных передней страницы передается через приложение на стороне браузера. (Vue.js) для рендеринга. Это отличается от общей архитектуры разделения внешнего и внутреннего интерфейса SPA.Обычно программа на стороне сервера отвечает только за предоставление содержимого (через ответ API) и не генерирует HTML для содержимого страницы.
Быстрый поиск в журналах WordPress с помощью Vue.js
В сценарии поиска WordPress каждый поиск инициирует запрос к серверу, что приводит к перезагрузке страницы. Даже если вы просто хотите выполнить быстрый и простой поиск заголовка журнала WordPress, вам, возможно, придется ждать полдня (из-за задержек в сети), что делает поиск в WordPress очень плохим.
Одностраничное приложение SPA имеет только одну полную страницу, при загрузке страницы оно не загружает всю страницу, а только обновляет содержимое в указанном контейнере. С помощью SPA вы можете позволить пользователям динамически обновлять веб-страницы, а не перезагружать их при поиске. Это делает пользовательский опыт очень приятным. Вы можете интуитивно почувствовать это на примере
Компонентная анатомия одностраничного приложения Vue с поиском {#vue-spa-overview}
Прежде чем погрузиться в код, давайте разберемся с внутренней работой этого одностраничного приложения. Следующая диаграмма объясняет поток взаимодействия компонентов в этом поисковом приложении.
AppNavigationИспользуется для установки пути доступа браузера для Vue Router и установкиAppQuickSearchа такжеAppCustomSearchКомпоненты и пути сопоставляются.
AppQuickSearch и AppCustomSearch — два полностью независимых родительских компонента, каждый компонент имеет свои данные, методы и свойства, у них есть два дочерних компонента AppFilterSwitches и AppGetPosts.
AppFilterSwitchesПереключатель, используемый для управления флажком или кнопкой.
AppGetPostsОн будет получать данные из WordPress REST API, фильтровать результаты по ключевым словам и условиям фильтрации, а затем вызывать компонент AppDisplayPost для отображения отфильтрованных результатов.
AppDisplayPostОн определяет стиль отображения и HTML результатов поиска.
Все вышеперечисленное выполняется на странице WordPress, для которой указан настраиваемый шаблон страницы.
Использование компонентов одного файла Vue
Возможно, вы видели много примененийVue.componentспособ определить пример глобального компонента. В этой статье я буду использовать более мощныйКомпонент Vue с одним файлом.
Однофайловые компоненты имеют много преимуществ, таких как предоставлениеПредварительно скомпилированный JavaScript, полная подсветка синтаксиса,Модули CommonJSтак же какCSS для компонентовЖдать. Интерфейсные проекты можно разрабатывать модульно с помощью однофайловых компонентов vue, а управление кодом становится более понятным.
Теперь, когда у вас есть общее представление о технологиях и принципах, затронутых в этой статье, давайте приступим к разработке.
Настройка локальной рабочей среды разработки с помощью Vue CLI
Разработка однофайловых компонентов Vue потребует использования ряда инструментов, таких как Vue Loader, Webpack, Babel и т. д. Но не бойтесь, я сделаю некоторые необходимые упрощения и пропущу этап работы с конфигурационными файлами.
Используйте Vue CLI для быстрого создания приложения Vue. Vue CLI — это полноценная система для быстрой разработки на основе Vue.js, которая обеспечивает плавное подключение различных инструментов сборки на основе интеллектуальной конфигурации по умолчанию, так что вы можете сосредоточиться на написании приложений, а не тратить дни на решение проблем с настройкой. Итак, давайте сначала настроим Vue CLI.
Шаг 1: Установите Node.js.
Чтобы использовать Vue CLI, в вашей системе должен быть установлен Node.js (версия узла выше 8.x, версия npm выше 3.x). Вы можете загрузить установщик для своей платформы со страницы загрузки Node.js. После завершения установки проверьте, работают ли следующие команды:
node --version npm --version
Шаг 2: Установите Vue-CLI
Затем откройте системный терминал и запуститеnpm install -g vue-cliкоманда для глобальной установки Vue-CLI (2.x). Сделав это, запуститеvue --versionкоманда для проверки.
Настройте Vue-CLI (2.x) для создания приложений Vue.
На изображении выше вы заметите, что я также установил ESLint глобально с помощью npm install -g eslint global. Это связано с тем, что я использую Visual Studio Code и связанные с ним плагины для проверки нормализации кода JavaScript. Вы можете использовать любой редактор кода, который вам нравится, но настоятельно рекомендуется настроить инструмент проверки кода JavaScript, например (ESLint, JSHint, StandardJS).
Выполнив базовую настройку, давайте создадим проект в папке темы WordPress с помощью Vue CLI.
Создайте проект Vue с помощью Vue CLI
Я использовал официальный шаблон, предоставленный vue.webpack-simple. Конечно, вы можете использовать более сложные предустановленные шаблоны или выбирать вручную в соответствии с вашими потребностями.
Vue CLI использует Webpack для настройки проектов Vue и предоставляет сервер разработки и другие современные инструменты сборки. Это обеспечивает нам очень удобный процесс разработки. Помимо прочего, это позволяет нам писать код с использованием синтаксиса JavaScript следующего поколения (ES6/ES7) во время разработки и компилировать в пакеты JavaScript с лучшей совместимостью с браузером синтаксиса ES5 во время выпуска.
Шаг 1: Настройте приложение Vue в WordPress
Чтобы создать проект vue, сначала войдите в каталог темы WordPress или каталог подтемы в терминале (эту тему необходимо активировать в фоновом режиме WordPress).
Перейдите в каталог тем WordPress.
Шаг 2: Создайте приложение Vue, используя шаблон Webpack-Simple
Далее выполните командуvue init webpack-simple project-name ,Пучокproject-nameзаменять成你的项目名字(спа в моем примере) и следуйте инструкциям на экране. это будет в<project-name>каталог для создания проекта Vue, содержащего конфигурацию для современных инструментов сборки.
Примечание. Если вы загружаете и используете мойподтема vuetwentyseventeen, пожалуйста, пропустите этот шаг vue init. папка уже содержитspaЭтот проект vue.
Создайте приложение Vue с помощью шаблонов vue init и Webpack.
Шаг 3: Установите зависимости разработки
В только что созданной папке проекта вы увидите файл с именемpackage.jsonдокумент. В основном в нем перечислены все инструменты разработки и зависимости, необходимые для проекта. Пожалуйста, выполните следующие команды, чтобы установить эти необходимые инструменты и библиотеки:
cd spa npm install
NPMавтоматически загрузит и установит все зависимые пакеты наnode_modulesв папке.
Установите зависимости разработки с помощью NPM
Пожалуйста, будьте осторожны, чтобы не развернуть какие-либо из этих загруженных зависимостей в реальном WordPress. Они нужны только на этапе разработки.
Шаг 4: Запустите Webpack Dev Server в WordPress
Как ни странно, вам нужно запустить сервер разработки Webpack, который был автоматически установлен на предыдущем шаге, в дополнение к запуску локальных служб WordPress (таких как XAMP, WAMP, VVV и т. д.), чтобы они работали вместе.
Причина в том, что наше одностраничное приложение на самом деле является чистым статичным приложением, независимым от бэкенда.На этапе разработки мы пишем однофайловый компонент vue, который должен автоматически компилироваться и обновляться сервером Webpack. Только после завершения разработки мы можем отправить окончательный скомпилированный пакет JavaScript в WordPress.
Чтобы запустить сервер разработки, запустите команду из папки проекта Vue.npm run dev. Затем вы увидите автоматически открывающийся в вашем браузереlocalhost:8080, который является проектом инициализации Vue.
Запуск сервера разработки Webpack
Компиляция и упаковка Vue.js
Если вы посмотрите на исходный код веб-страницы в своем браузере, вы обнаружите, что страница содержит только один файл JavaScript — build.js. Это связано с тем, что когда вы запускаете сервер разработки, Webpackавтоматическая компиляция, использовать разные загрузчики для обработки всех зависимых файлов проекта и, наконец, упаковать их в распознаваемый браузером файл JavaScript.
Обратите внимание, однако, что этот файл на самом деле не сохраняется в вашей системе, а динамически генерируется во время выполнения Node и Webpack.
Пакеты JavaScript, динамически генерируемые Webpack во время выполнения
Чтобы сгенерировать публикуемый файл JavaScript, вы должны запуститьnpm run build, о чем мы упомянем на более позднем этапе.
Теперь у нас есть полнофункциональное приложение Vue, обслуживаемое сервером разработки Webpack, установленным в папке темы WordPress. Однако на данном этапе это не имеет ничего общего с WordPress, кроме физического пути установки. Итак, давайте посмотрим, как интегрировать приложение Vue с WordPress.
Интеграция Vue с WordPress
Для интеграции приложения Vue с WordPress в основном требуются три вещи:
Элементы DOM в WordPress, используемые в качестве точек монтирования для экземпляров Vue.
Добавьте скомпилированные файлы Vue (например, build.js) в сценарии очереди WordPress.
Указание элементов WordPress DOM в Vue
Обслуживание элементов DOM для Vue в WordPress
Вы можете смонтировать экземпляр Vue на одной или нескольких страницах WordPress или условно. В любом случае, все, что нужно Vue, — это элемент DOM на странице WordPress.
Для этого вы можете использовать WordPressTemplate Hierarchy(Иерархия шаблонов), чтобы определить, какой файл шаблона необходимо отредактировать. В моем примере я хочу, чтобы этот Vue SPA отображался на любой странице WordPress, на которой указан пользовательский шаблон страницы. Вы также можете использовать темушаблон страницычтобы указать конкретную страницу, в зависимости от ваших потребностей.
В моем примере подтемаtemplates/vue-search-app-template.phpэто настраиваемый шаблон страницы, который предоставляет элементы DOM для Vue.#wp-vue-app.
Зарегистрируйте приложение Vue в WordPress
Чтобы WordPress знал о приложениях Vue, вы должны сделать это в WordPress для Vue.регистрация/очередь(зарегистрироваться/поставить в очередь). Поскольку код часто модифицируется во время разработки, очень неудобно собирать его вручную после каждой модификации кода vue.Для удобства мы можем использовать функцию динамической сборки webpack.
После запуска сервера разработки Webpack мы можем использовать путьhttp://localhost:8080/dist/build.jsЗарегистрируйте экземпляр Vue в WordPress.
После изменения и сохранения кода vue сервер разработки Webpack автоматически скомпилирует и автоматически обновит страницу.
Зарегистрируйте динамические пути сборки в WordPress во время разработки
Вот почему во время разработки мы должны запускать как локальный сервер WordPress, так и сервер разработки Webpack. После завершения разработки необходимо изменить путь для прохожденияnpm run buildСгенерированный путь к файлу.
Зарегистрируйте фактический файл сборки в WordPress после разработки
Также обратите внимание, что все файлы в папке проекта Vue не нужно распространять с темой WordPress, за исключением окончательных скомпилированных файлов. Они требуются только во время разработки и должны перекомпилироваться после каждой модификации.
В моем примере темы я нахожусь вincludes/enqueue-scripts.phpЗарегистрированный адрес скомпилированного файла Vue.
Укажите точку монтирования DOM в WordPress в Vue
Наконец, чтобы загрузить приложение Vue в WordPress, все, что требуется, — это указать Vue, куда его монтировать. Чтобы указать элементы WordPress DOM в vue, есть два способа, вы можете сделать это вmain.jsиспользоватьel, или, в качестве альтернативы, вы можете использовать$mountметод.
В моем примере я монтирую приложение vue в контейнер DIV пользовательского шаблона страницы.#wp-vue-app середина.
Использование «el» для указания точек монтирования в Vue
Вот и все, стартовый проект Vue будет готов для отображения в WordPress.
Рендеринг приложения Vue в WordPress
Выглядит хорошо, приложение Vue было успешно внедрено в WordPress, и теперь вы можете создавать практически все, что захотите, с помощью Vue. Итак, давайте углубимся в создание поискового приложения с помощью Vue.
Создание одностраничного приложения поиска в WordPress
если ты оглянешься назадначало этой статьиизблок-схема, вы сможете лучше понять окончательный эффект следующего поискового приложения:
Создание приложения Vue Search в WordPress
Структура папок проекта
Я использовал пример проекта Vue в качестве базы, из которой я удалилspa/index.htmlа такжеsrc/assets, что приводит к следующей структуре папок:
Структура папок поискового приложения Vue в WordPress
подтемаincludesКаждый файл PHP в папке определяет соответствующую функцию обратного вызова, поэтому я могу использовать только однуfunctions.phpфайл для установки<a rel="noreferrer noopener" href="https://developer.wordpress.org/reference/hooks/" target="_blank">WordPress Hooks</a>(функция крючка). Я предпочитаю этот подход, чтобы иметь все в одномfunctions.phpв файле.
Установите функции ESLint и ESNext (необязательно)
Если вы планируете использовать функции ESLint (которые я настоятельно рекомендую) или функции ESNext (например, Async/Await), вам также потребуется добавить в проект некоторые дополнительные зависимости.
Настройте ESLint для WordPress и Vue
Для настройки ESLint я установилeslint-plugin-vueи спецификация кода для wordrdpresseslint-config-wordpress. Сначала остановите сервер разработки (Ctrl+C), затем выполните следующие команды из папки проекта Vue:
Затем добавьте следующее в.eslintrc.jsonВ файле: “extends”：[“eslint：recommended”，“wordpress”，“plugin：vue / recommended”]
Это настроит WordPressСпецификация кода JavaScript, и установите предустановленные правила eslint, официально рекомендованные vue. Работа с таким редактором кода, как VS Code, позволяет не только в значительной степени избежать основных синтаксических ошибок, но и обеспечить удобочитаемость кода.
Отлов ошибок с помощью ESLint в Visual Studio Code
Настройка Babel для использования Async/Await
Настройка Babel выходит за рамки этой статьи, вот как вы можете использовать синтаксис Async/Await ES7 в своих проектах Vue. Выполните следующую команду, чтобы добавитьbabel-preset-vue-appТы сможешь:
npm install --save-dev babel-preset-vue-app
Затем в проекте Vue.babelrcДобавьте пресеты в файл: "presets": [["env", { "modules": false }], "stage-3", "vue-app"]
Когда закончите, не забудьте использоватьnpm run devЗапустите сервер разработки. Пример дочерней темы, которую я предоставил, дочерняя тема Vue, уже настраивает все это для вас, поэтому вам просто нужно передатьspaзапустить в каталогеnpm installустановить его.
Доступ к данным WordPress из vue
Vue — это JavaScript, который работает в браузере, поэтому он не может получить доступ к каким-либо данным в WordPress. Чтобы сделать данные WordPress доступными для приложения Vue, вы должны использовать WordPresswp_localize_scriptфункция.
я в подтемеvuetwentyseventeenизincludes/enqueue-scripts.phpзавершил эту настройку.
Комментарии в приведенном выше описании довольно ясны, поэтому я объясню здесь данные, которые необходимо предоставить приложению Vue:
wpData.template_directory_uri– Путь, используемый для создания статических файлов в папке темы.
wpData.rest_url– Адрес REST API, используемый для получения данных WP.
wpData.app_path– URL-адрес страницы WordPress, используемой для запуска SPA.
wpData.post_categories- каталог wp, флажки для условий фильтра
С их помощью мы, наконец, можем приступить к разработке однофайлового компонента одностраничного поискового приложения vue.
Создайте одностраничное поисковое приложение с однофайловыми компонентами Vue.
Ссылаясь на предыдущую компонентную архитектуру, первым компонентом, который я разработал, былAppDisplayComponent. Давайте начнем с самой базовой функциональности, этот компонент просто отображает заголовок сообщения, используя собственный JavaScript.Fetch APIи API ресурса журнала WordPress (Posts resource– –/wp/v2/posts).
Базовая версия компонента AppDisplayPost
Простая версия компонента AppDisplayPost
Далее я удалилApp.vueОригинальное содержание примера вAppDisplayPostКомпонент используется для отображения журналов на странице WordPress следующим образом:
Компонент AppDisplayPost из App.vue
Конечно, не все работает за один раз, это плагин для Chrome.Vue DevToolsВремя изменить ситуацию. Я предлагаю вам установить его тоже, он может использовать дружественный интерфейс для отладки и проверки приложений Vue, вместо того, чтобы использовать грязный способ вывода всего в консоль браузера.
Отладка приложений Vue с помощью Vue Devtools
Я также рекомендую вам использоватьPostmanИнструменты API, такие как WP REST API, взаимодействуют с WP REST API. Это сэкономит вам много времени, а данные будут отображаться более четко, что упростит просмотр значений ответов API:
Взаимодействие с API REST WordPress с помощью клиента REST, такого как Postman.
Мне потребовалось некоторое время, чтобы впервые отладить рендеринг журналов WordPress в приложении Vue, но после нескольких раундов с Vue DevTools и Postman все стало лучше, и я почувствовал себя хорошо. Я также решил расширить ответ WordPRESS API по умолчанию, чтобы добавить пользовательский контент.
Пользовательский контент, расширяющий API REST WordPress.
Ответ WordPress REST API по умолчанию довольно исчерпывающий, но, скорее всего, он не удовлетворит всем вашим потребностям.
Например, вы можете захотеть отобразить такую информацию, как имя автора, комментарии и миниатюры сообщений (избранные изображения). Если вы используете Postman для инициирования запроса GET к ресурсу журнала, вы заметите, что эта информация (автор, комментарий и т. д.) не может использоваться непосредственно в ответе по умолчанию, и вам необходимо инициировать вторичный запрос на основе полученного URL-адреса. в ответ.
Конечно, вы можете легко получить больше информации, добавив_embed=true参数添加到wp/v2/posts地址后面再发起api请求 。使用_embed, API автоматически расширит в ответе все теги, отмеченныеembeddable: trueполе.
Для своего одностраничного поискового приложения Vue я решил расширить отклик API и добавить следующие настройки:
Расширьте стандартный ответ WordPress REST API.
Если вы посмотрите на мою подтемуAppDisplayPostкомпонент, вы заметите поля, которые я используюvue_metaНе то, на что API отвечает по умолчанию. Это делается через подтемыincludes/extend-api.php文件изregister_rest_fieldДобавлена функция, код в ней очень простой. Если вы хотите узнать больше о расширении ответов API, см.REST API Handbook的Modifying Reponses` раздел.
Далее я создалAppGetPostsОднофайловый компонент, переместите в него логику кода для получения логов,AppDisplayPostКомпоненты используются только для отображения журналов.
Компонент AppGetPosts получает данные из REST API
Разделение кода получения логов означает передачуpropsпередавать данные вAppDisplayPostsкомпонент .
Затем вAppGetPostsВ вызове, который я получаю для каждого журнала, который я получаюAppDisplayPostкомпонент.
я решил использоватьAxiosВместо собственного Fetch API запрашивать WordPress REST API. Вы также можете использоватьjQuery(уже включено в WordPress) сделатьAJAXпередача.
Примечание. Чтобы использовать Axios, вы должны запустить его в папке проекта Vue, запустивnpm install axiosУстановка в производственной среде.
Получить только поля с WordPress REST API
Недавно я узнал, что вы можете использовать_fieldsпараметры из ответа APIПолучить только обязательные поля. Это эффективно снизит нагрузку API на передачу по сети, особенно когда содержимое журнала ответа API в формате JSON не отображается. Для достижения этого эффекта просто_fieldsЕго можно добавить к URL-адресу API вместе с именами полей, разделенными запятыми, как показано ниже.
Используйте параметр _fields для выборочного получения полей в ответе API.
Не включено в руководство WordPress REST API._fieldsиспользование параметров, поэтому вы можете обратить пристальное внимание на руководство.
Получить все сообщения из WordPress REST API
В настоящее время невозможно получить все журналы сразу через REST API WordPress. Итак, вам нужно зацикливать несколько запросов к API, пока вы не получите все необходимые данные.
я использовалпараметры пагинацииper_page=100и поля заголовка http WordPressX-WP-Total(при условии общего количества записей в коллекции), чтобы рассчитать общее количество запросов API.per_pageВ настоящее время параметры ограничены 100 записями, поэтому нам нужно делать несколько запросов к API, когда журналов больше 100. См. Суть ниже для метода реализацииAppGetPostsкомпонентget_postsфункция:
В приведенной выше сути,get_postsФункция будет вызываться автоматически после монтирования компонента, я использовалАсинхронный/ожидание ES7Метод записи определяет функцию как асинхронную функцию(асинхронная функция).
вы заметите первыйAxiosзапросawaitНаписание - const response = await axios（...). Это делается для предотвращения выполнения последующего кода до тех пор, пока первый запрос не будет успешным. сделать это, чтобы получитьx-wp-totalдля подсчета количества запросов API.
Второе использование await происходит в конце, перед рендерингом данных с помощьюPromise.allУбедитесь, что все промисы успешно выполнены. Конечно, вы также можете визуализировать данные после загрузки данных, оба из которых перечислены ниже:
Когда необходимые данные загружены, я нахожусь ввычисляемое свойствоДобавлены ключевые слова для поиска и соответствующая логика поиска в . Ниже вы можете увидеть, как я использовалFilteredResultsфильтроватьwpPostsданные и вызовAppDisplayPostКомпонент для отображения результатов.
Компоненты AppQuickSearch и AppFilterSwitches
СейчасAppGetPostsРаботает нормально, может обрабатывать выборку данных и поиск в журнале, затем я перемещаю поле ввода пользователя в родительский компонент.AppQuickSearchи используйте реквизиты для передачи данных.
Я создал новый дочерний компонентAppFilterSwitchesИспользуется для отображения условных флажков (список каталогов wp, источником данных является локальный объект WordPress).wpData), этот дочерний компонент вызовет (emits) пользовательское событиеonFilterToggle, AppQuickSearch как родительский компонент должен прослушивать это событие.
Наконец, все компоненты объединяются вAppQuickSearch
Наконец, запуститеnpm run buildСоздайте окончательный скомпилированный файл.
Используйте сборку npm run для создания окончательной сборки.
Если вы зашли так далеко, вы сможете довольно легко изучить остальную часть приложения vue. В окончательной версии компонентов действительно много, но они основаны на всем, что вы только что видели.
Изучите компоненты маршрутизации и поддержки активности
Хотя наше одностраничное приложение для быстрого поиска может закончиться здесь, чтобы продемонстрировать механизм маршрутизации vue (Vue routing) и повторное использование компонентов, я добавил еще один компонентAppCustomSearch.
ты сможешьspa/src/app-routes.jsНайдите функцию маршрутизации, которая предоставляет две навигационные ссылки.AppQuickSearch,AppCustomSearchи обеспечивает сопоставление навигационных ссылок и компонентов.Vue Routerвыходит за рамки этой статьи, если вы хотите использовать маршрутизацию Vue на своих страницах WordPress, имейте в виду, что Vue будет использовать'#'для имитации полного URL-адреса, чтобы страница не перезагружалась при изменении URL-адреса. Если вы попытаетесь удалить # в URL-адресе для прямого доступа к маршруту, определенному в app-routers.js, тогда адрес будетWordPress REST APIВступите во владение, поскольку этот адрес отсутствует в API WordPress, страница в конечном итоге не будет найдена, и будет возвращена ошибка 404.
App.vueФайл является общим компонентом, который вызываетAppNavigationа такжеrouter-viewкомпоненты. Ты заметишьrouter-viewОн завернутkeep-aliveВ середине компонентов это связано с тем, что использование компонентов _keep-alive_ может кэшировать неактивные компоненты, чтобы сохранить состояние компонента и избежатьAppQuickSearchа такжеAppCustomSearchПовторный рендеринг при переключении между компонентами.
И это все!
Суммировать
Надеюсь, эта статья будет вам полезна. Ты сможешьЗагрузите эту подтему здесьдокументации в качестве практического проекта для улучшения ваших навыков работы с WordPress и JavaScript.