Creación de una aplicación híbrida de una sola página en WordPress con VueJS

Encienda su aplicación de WordPress con Vue.js-El marco de JavaScript progresivo que ahora divide la escena con las personas como reaccionadas y angulares. En este artículo, le mostraré cómo integrar una aplicación de búsqueda de una sola página en su aplicación de WordPress con Vue.js-un marco JavaScript muy popular para el desarrollo de interfaces de usuario ricas. Lo guiaré a través de todo el proceso de construcción de una aplicación VUE desde cero, interactuando con la API REST WordPress y creando una aplicación de búsqueda con los componentes VUE reutilizables. Si nunca ha trabajado con Vue u otros marcos/bibliotecas de JavaScript modernos, es un buen momento para ingresar. Si bien la gran cantidad de marcos que le instan a mejorar su juego de JavaScript pueden ser bastante abrumadores, Vue hace nada menos agradable. .
Nota: Este artículo está destinado a los desarrolladores de WordPress de publicidad intermedia y supone que tiene conocimiento práctico sobre PHP, JavaScript, Vue.js y la API REST WordPress. Si desea una actualización, le recomiendo leer lo siguiente:
JavaScript para desarrolladores de WordPress
Una guía de inicio rápida para la API REST de WordPress
JavaScript y la API REST WordPress: Comprender la jerga
La familiaridad con Vue.js (2.x) también es esencial. La aplicación de una sola página (SPA) utiliza muchas de las funciones VUE, como componentes de un archivo, eventos personalizados, propiedades calculadas, ganchos de ciclo de vida, así como axios para interactuar con la API REST WordPress. Si es nuevo en Vue, es muy fácil hacerse cargo y puede comenzar en unas pocas horas con estos tutoriales:
Vue.js 2 – nociones introductorias de Acadeind
INTRODUCCIÓN A VUE.JS BY VUE MASTERYDE Y Aplicaciones Vue se pueden escribir en la sintaxis Pure ES5, usaré algunas nuevas características de JavaScript insertadas en las versiones ES6 y ES7. Si necesita estar al día con ES6, eche un vistazo a lo siguiente:
ES6 JavaScript – elementos básicos
Guía de desarrolladores de WordPress para ES2015 (ES6)
Cinco cursos de cinco minutos en ES6 y ES7
Si necesita usar Modern o Vue.js JavaScript, dependerá completamente de sus requisitos y preferencias. Mi objetivo es ayudarlo a explorar las posibilidades de integrar una sola página en WordPress con una aplicación de búsqueda práctica. Entonces, ¡comencemos!
La presentación general de Vue Spa en WordPress para este artículo, creamos una aplicación de búsqueda de una sola página en WordPress con Vue.js, utilizando un tema secundario de veinte diecisiete WordPress. Puede descargar el tema del niño desde aquí para seguirla con el artículo. La aplicación de búsqueda se puede representar en cualquier página de WordPress utilizando plantillas de página personalizadas. La plantilla de página prácticamente le da al Tribunal Vue un elemento DOM existente para montar.
Integración de una aplicación Vue.js en WordPress con plantillas de página personalizadas

Por lo tanto, la aplicación adopta un enfoque híbrido o mixto, en el que una aplicación en el lado del servidor (WordPress) también sirve, pero partes de ella se reproducen con una aplicación en el cliente, como Vue. Es diferente de un spa puro que puede usar un CMS sin cabeza o desacoplado, donde el motor en el servidor solo es responsable de proporcionar contenido (a través de una API) y no genera HTML para jugarlo.
Mejora de la experiencia de búsqueda con Vue.js En un escenario de búsqueda tradicional, cada solicitud al servidor determina la recarga de la página. Sin embargo, con Vue.js o un enfoque SPA, la página se actualiza dinámicamente a medida que el usuario interactúa con la búsqueda, pero sin recargas constantes. Esto proporciona una experiencia de usuario muy agradable. De hecho, puede probarlo aquí, en este bolígrafo que creé: la aplicación My Vue Search se basa en el ejemplo en el lápiz de arriba. Por lo tanto, tengamos una idea del funcionamiento interior de la aplicación de búsqueda antes de arrojarnos al código. El análisis de la aplicación de búsqueda de una sola página VUE explica cómo la aplicación de búsqueda se compone utilizando varios componentes reutilizables que interactúan entre ellos.
Aplicación de búsqueda interna de una sola página VUE
En un alto nivel, esto es lo que hacen los diferentes componentes:

AppNavigation ofrece los enlaces del enrutador para el enrutador VUE para reproducir los componentes AppQuicksearch y AppCustOsearch.
AppQuicksearch y AppCustOmsearch funcionan como componentes principales para AppFilterSwitches y AppgetPosts. Sin embargo, dos aplicaciones de búsqueda totalmente independientes, cada una equipada con sus propios datos, métodos y propiedades, resultan.
AppFilterSwitches reproduce interruptores de conmutación de entrada que pueden ser cuadros de selección o botones de radio, dependiendo de los parámetros que se transmiten.
AppgetPosts toma datos de la API REST WordPress y los filtra usando la clave de búsqueda y cambia las entradas. Luego llame al componente AppDisplayPost para cada publicación en el resultado filtrado.
AppDisplayPost reproduce la marca para un artículo de publicación individual y lo muestra en los resultados de búsqueda. Todos tienen lugar dentro de una plantilla de página personalizada atribuida a una determinada página de WordPress.
El uso de componentes de un solo archivo VUE puede haber visto muchos ejemplos de componentes VUE creados con Vue.component que usan plantillas en cúpulas o plantillas de JavaScript. Sin embargo, para crear la aplicación de búsqueda de WordPress, utilizamos los componentes fuertes con un solo archivo VUE. Los componentes con un solo archivo tienen muchas ventajas inherentes: la capacidad de proporcionar JavaScript (funciones de representación) pre -compilado al navegador, destacando la sintaxis, componentes que no tienen en cuenta minúsculas y minúsculas para componentes, por nombrar algunos. También me permito escribir un código modular y fácil de administrar dividiendo la base del código en varios archivos (.Vue).
Ahora que tiene una idea correcta de cómo funcionan las cosas, comencemos a construir la aplicación. El uso de Vue-CLI para configurar una división de flujo de trabajo de desarrollo local del código en varios archivos (.Vue) con un solo archivo componentes requerirá el uso de herramientas de desarrollo como Vue Loader, Webpack, Babel, etc. Simple y no trata con archivos de configuración. Con Vue-Cli, puede montar rápidamente una aplicación Vue que está preconfigurada con las mejores herramientas de construcción para un flujo moderno de Fronond Fronade. Así que pongamos el CLI primero. Paso 1: Instale Node.js para usar Vue-Cli, necesitará Node.js (preferiblemente 8.x, NPM 3+) instalado en su sistema. Puede descargar el programa de instalación para su plataforma en la página de descarga node.js aquí. Una vez que haya configurado, pruebe si los siguientes comandos funcionan: nodo -vversion y npm -vversion
Paso 2: Instale Vue-Cli y luego abra su terminal del sistema (PowerShell en mi caso) e instale Vue-CLI (2.x) a nivel mundial, ejecutando NPM Install -G Vue-Cli. Una vez terminado, pruebe si funciona ejecutando el comando Vue -vversion.
Configuración VUE-CLI (2.x) para crear aplicaciones VUE
En la imagen de arriba, notará que hemos instalado e instalado a nivel mundial con NPM Install -G ESLTT. Esto se debe al hecho de que utilizo el editor de código Visual Studio y sus complementos para formatear y dejar JavaScript. Puede usar cualquier editor de código de su elección, pero la configuración de uno con un enlace JavaScript es muy recomendable.
Con la configuración básica completada, creemos una aplicación en WordPress con Vue-Cli. Instalación de una aplicación Vue con Vue-Cli para crear la aplicación VUE, utilicé el paquete web VueJS-Template oficial-simple. Sin embargo, es posible que desee utilizar una plantilla más sofisticada, basada en su plantilla requiere un Vue con el proyecto Webpack y lo configura con un servidor de desarrollo y otras herramientas de construcción modernas. Esto nos da un trabajo de desarrollo elaborado. Entre otras cosas, nos permite escribir código usando JavaScript NextGen (ES6/ES7) durante el desarrollo, pero entregamos el paquete JavaScript en ES5 para una mejor compatibilidad con el navegador. En WordPress, tema o tema infantil utilizando el terminal del sistema. Aquí, uso PowerShell (en Windows 10) integrado con el editor de código Visual Studio.
Navegue a su director de temas de WordPress

Paso 2: Cree una aplicación VUE con la plantilla de SIMLE WebPack y luego, ejecute el comando Vue init Webpack-Simple Project-Name, reemplazando el nombre del proyecto Vue Init Webpack-Simple con su proyecto (spa en mi ejemplo) y siga las instrucciones desde la pantalla.
Creación de una aplicación Vue con Vue Init y una plantilla de Webpack
Nota: omita este paso si sigue con mi hijo Vuetwentysenteen.Ya contiene la aplicación en la carpeta del proyecto SPA.Esto crea el proyecto VUE en el Director con configuraciones para herramientas de construcción modernas.Paso 3: Instale las adicciones al desarrollo Si va a su tema de WordPress usando el editor de códigos y busca el archivo de proyecto recién creado, entre muchos archivos nuevos, notará un archivo llamado paquete.json.Básicamente, enumera todas las herramientas de desarrollo que necesitará la aplicación.Estas herramientas aún deben instalarse y, para hacer esto, ejecute lo siguiente: CD Project -Name (reemplace el name -Project con la carpeta del proyecto)
Instalación de NPM

NPM luego descargará e instalará todas las adicciones necesarias en una carpeta llamada Node_Modules
Instalación de desarrollo de desarrollo de desarrollo de NPM

Tenga en cuenta que no implementaremos ninguno de estos archivos descargados en WordPress. Se necesitan solo en la fase de desarrollo. Paso 4: Ejecute el servidor de desarrollo webpack con WordPress El paso final implica ejecutar el servidor de desarrollo de Webpack que se ha instalado en el paso anterior. Al principio puede parecer extraño, pero debe ejecutar el servidor de desarrollo (instalado en el paso anterior) y mantenerlo con su servidor local de WordPress (XAMP, WAMP, VVV, etc.). Incluso si Vue SPA es una aplicación del lado del cliente, debe ser atendida por un servidor, y el servidor Webpack lo hará por nosotros. Solo cuando se complete el desarrollo, serviremos al paquete JavaScript final a través de WordPress. Para iniciar el servidor de desarrollo, ejecute el comando NPM Ejecutar DEV en la carpeta VUE Project. Luego verá la aplicación VUE Start automáticamente en Localhost: 8080 en el navegador. Strenging the Webpack Development Server
El paquete Vue (build.js) Si observa la fuente de la aplicación Start en el navegador, notará que la página contiene solo un archivo de script: build.js. Esto se debe al hecho de que cuando ejecuta el servidor de desarrollo, Webpack compiló automáticamente la aplicación VUE y la combinó con la biblioteca VUE y cualquier otra adicción en un solo archivo JavaScript. Sin embargo, tenga en cuenta que el archivo no existe físicamente en su sistema y se genera dinámicamente por Node y Webpack durante la ejecución.
El paquete JavaScript se generó dinámicamente mientras se ejecuta Webpack
Para generar un archivo de compilación física que puede entregar con su aplicación, debe ejecutar la compilación NPM Run, que veremos en una etapa posterior. En esta etapa, tenemos una aplicación VUE completamente funcional atendida por un servidor de desarrollo dentro de la carpeta de WordPress. Sin embargo, todavía no tiene nada que ver con WordPress. Así que veamos cómo puede integrar la aplicación VUE con su tema de WordPress. La integración de Vue Spa con WordPress Integración de la aplicación Vue con WordPress requiere en esencia tres cosas: un elemento dom en WordPress para montar la aplicación Vue
Pon el paquete Vue en WordPress en la cola

Información Vue sobre el punto de montaje DOM en WordPress
Proporcionar el elemento DOM en WordPress para Vue puede querer conectar la aplicación VUE a una sola WordPress o más páginas, o condicionales. Todo lo que necesita para Vue es un elemento DOM que existe en su página favorita de WordPress. Para hacer esto, puede usar la plantilla de Jerarquía WordPress para decidir el archivo de plantilla necesario que se editará. En mi ejemplo, quiero que la aplicación de búsqueda aparezca en cualquier página de WordPress utilizando una determinada plantilla de página personalizada. En su lugar, es posible que desee utilizar plantillas de página ordinarias para orientar ciertas páginas de acuerdo con las plantillas de página de su página de requisitos/Vue-Search-Applate.php Of My Child El ejemplo ofrece el elemento DOM, #wp-vue-app para Vue.

El FC6EC65077819AAD1A33615EEC47DF9 esencial se carga
Al registrar la aplicación VUE en WordPress para informar a WordPress sobre la aplicación VUE, debe registrar/poner el paquete VUE en WordPress. Sin embargo, no es factible generar un archivo de compilación después de cada cambio durante el desarrollo. Para esto, podemos aprovechar la construcción dinámica que vio anteriormente. Mientras se ejecute el servidor de desarrollo webpack, podemos usar la ruta de construcción dinámica http: // localhost: 8080/distrito/build.js para registrar el script VUE en WordPress. El servidor Webpack compilará automáticamente el paquete VUE nuevamente y actualizará la página a medida que se modifica la aplicación. Registrando el edificio dinámico en WordPress durante el desarrollo

Es por eso que debe ejecutar el servidor local de WordPress y el servidor Webpack durante el desarrollo. Cuando se complete el desarrollo, deberá cambiar la ruta para reflejar el archivo físico que se genera ejecutando NPM Run Build.
Registro de archivo de construcción física en WordPress después del desarrollo
Además, recuerde, excepto por el paquete VUE final, ninguno de los archivos en la carpeta del proyecto VUE debe entregarse con su tema de WordPress. Solo se requieren durante el desarrollo y cuando necesita hacer cambios para regenerar el paquete VUE. En mi ejemplo de tema, grabé el paquete Vue en incluir/enqueue-scripts.php
Cargue la idea E786B9C302896B22EE4001A8D57AA02C
Informar a Vue sobre el punto de montaje de WordPress al final, para cargar la aplicación Vue en WordPress, todo lo que es necesario es decirle a Vue dónde encajar. Esto se hace especificando el elemento DOM WordPress con la opción en Main.js de su proyecto VUE. Alternativamente, también puede usar el método $ Mount. En mi ejemplo, monto la aplicación en el contenedor Div #WP-Vue-App de mi plantilla de página personalizada.
Y aun así, la aplicación VUE Start se mostrará en WordPress.
Relrieing Vue Inicio de inicio en WordPress
Genial, con la aplicación de inicio de Vue inyectada con éxito en WordPress, ahora puede construir casi cualquier cosa con Vue. Así que vamos a los detalles de mi aplicación de búsqueda VUE. Creación de una aplicación de búsqueda de una sola página en WordPress Si observa el diagrama al comienzo del artículo, podrá consultar la aplicación de búsqueda final presentada a continuación:

Creación de una aplicación de búsqueda VUE en WordPress
La estructura de la carpeta del proyecto Para construir esto, simplemente utilicé la aplicación VUE Start. Escapé spa/index.html y src/activos del proyecto VUE y llegué a la siguiente estructura de carpetas:

Estructura plegable de la aplicación Vue Search en WordPress
Si se pregunta acerca de la carpeta inclinada del tema infantil, es porque uso funciones.php solo para especificar WordPress Hooks y definir las respectivas devoluciones de llamada en archivos PHP individuales que incluyen/. Prefiero este enfoque para descargar todo en un archivo functions.php.
Cargue el esencial CF0D04AA7E77A50D479BeedB25D4E650
Agregar adicciones adicionales para las características de ESLINT y ECMASCRIPTNEXT (opcional) Si tiene la intención de usar Eslint (que recomiendo) o Esnext, como Async/Await, deberá agregar algunos paquetes de desarrollo adicionales a su proyecto. Configurar Eslint para WordPress y Vue Para configurar Eslint, instalamos Esint-Plugin-Vue y Esltt-Config-WordPress. Para hacer esto, apague el servidor de desarrollo (CTRL+C) y ejecute lo siguiente dentro de la carpeta del proyecto VUE: NPM Instalar-Save-Dev Eselt Eltt-Plugin-Vue NPM Install-Save-Dev Esltt-Config-WordPress y luego , Agregue lo siguiente a su .slintrc.json: “extiende”: [“Eslint: recomendado”, “WordPress”, “Plugin: Vue/recomendado”] Esto configurará los estándares de codificación de JavaScript y las reglas de listado predefinidas. Vue/Recomentado fuertemente para vue. Con editores modernos como VS Code, esto me ayuda enormemente a captar y reparar los errores sobre la marcha: detectar errores con ESINT en el código de Visual Studio

Agregar Babel Preset para Async/espera Babel Preset no cae en esta aplicación de artículo, pero lo siguiente prácticamente le permitirá usar ES7 Async/espera en la aplicación VUE. Para hacer esto, debe agregar el Babel-Preset-Vue App: NPM Install: Save-Dev Babel-Vue-App y luego agregue Vue-App en el archivo .babalrc de la carpeta VUE Project: “Presets”: [[“Env”, {“Módulos”: False}], “Etapa-3”, “Vue-App”] Cuando haya terminado, no olvide iniciar el servidor de desarrollo con NPM Ejecutar dev. Mi ejemplo de un tema de Child Vue ya tiene todo esto ya configurado para usted, por lo que solo tiene que instalar los paquetes ejecutando la instalación de NPM desde el director de spa. Ponga que los datos locales de WordPress disponibles para Vue Vue finalmente se ejecuten JavaScript en su navegador y, por lo tanto, no tendrán acceso a WordPress. Para que los datos locales de WordPress estén disponibles para la aplicación VUE, deberá usar los antiguos wp_localise_scripts wp_localise_crizt. Lo he hecho en incluir/enqueue-scripts.php de mi tema de niño vuetwentysenteen. La idea 3160a325086acd89fc39fccc5685df4a está cargada.
La esencia anterior debe explicarse por sí misma con todos mis comentarios, por lo que me centraré en los otros datos que he proporcionado para mi aplicación VUE:


Wpdata.template_directory_uri – para construir la ruta del archivo para activos estáticos (como imágenes) en la carpeta de temas
wpdata.rest_url-url para hacerse cargo de las publicaciones del descanso WP

Wpdata.app_path – Página de WordPress Spa para crear enlaces relativos
Wpdata.post_categories: para reproducir los cuadros de selección para filtrar postarilorcu esto fuera de la carretera, finalmente exploramos los componentes con una sola aplicación de búsqueda. Creación de la aplicación de búsqueda con componentes de un solo filo VUE con la estructura de la aplicación de búsqueda creada, el primer componente que creé fue en realidad AppDyPlayComponent. Comencé con un componente básico para mostrar solo publicaciones utilizando API JavaScript Fetch API y publicaciones de recursos de WordPress recursos -/wp/v2/publicaciones. Una versión básica del componente AppDysPlayPost

Una versión básica del componente AppDisplayPost para comenzar
Y para reproducirlo en la página de WordPress, eliminé todo el contenido inicial de la aplicación. Vue e invocé el componente AppDisplayPost como se muestra a continuación:
Una aplicación muy simple.
Sin embargo, no todo funcionó en el primer intento (o incluso algunos después), cuando la extensión de Chrome A Vue Devtools vino en mi ayuda. Le sugiero que lo instale tan bien como le permitirá solucionar problemas e inspeccionar la aplicación VUE con un uso más fácil, en lugar de registrar todo en la consola.

Eliminar aplicaciones VUE con Vue Devotools
También recomendaría usar una herramienta Postman para interactuar con WP REST API. Le ahorrará durante mucho tiempo comprender la respuesta de la API y le proporcionará los datos en un formato mucho más fácil de ver. Esto es lo que quiero decir:
Usar una aduana REST como Postman para interactuar con WordPress REST API
Jugar publicaciones de WordPress en la aplicación VUE me llevó algún tiempo configurarlas inicialmente, pero después de algunas rondas entre Vue Devtools y Postman, estaba listo para irme. En este momento, decidí extender la respuesta de la API para agregar contenido personalizado. Expandir el descanso API de WordPress para contenido personalizado La respuesta predeterminada de la API REST es bastante completa; Sin embargo, es posible que no cumpla con todos sus requisitos, por ejemplo, es posible que desee mostrar información como el nombre del autor, los comentarios y la imagen presentada. Si realiza una solicitud GET a la ruta de publicaciones en Postman (o su descanso favorito), notará que no están disponibles directamente en la respuesta predeterminada. Aunque la extensión de la API es una opción aquí, también puede tomarla simplemente agregando el parámetro _embed = true al recurso-wp/v2/publicaciones? _Embed = true. Con _Embed, la API reunirá todos los metadatos marcados con incrustable: verdadero en la respuesta posterior. Para mi aplicación de búsqueda VUE, decidí extender la API y agregué el siguiente contenido personalizado: extender la respuesta predeterminada de WordPress REST API
Si observa la versión final del componente AppDisplayPost de mi hijo, notará que he usado un campo VUE_Meta que no es parte de la respuesta predeterminada. Se agregó con la función Registro_REST_FIELD en INCUENTES/EXTEND-API.PHP del tema infantil. El código allí es lo suficientemente simple y para obtener más información sobre la extensión de la API, eche un vistazo a la sección de modificación de los refonsos del Manual REST API. Con esto, luego moví la lógica para tomar publicaciones en el componente AppgetPosts y usé solo AppDisplayPost para reproducir el contenido necesario de los elementos de publicación individuales. El componente AppGetPosts para consumir datos del resto de la eliminación de la lógica para el hallazgo de datos también significó el paso de las publicaciones a AppDisplayPosts.
Luego, en AppgetPosts invocé AppDisplayPost para cada publicación en la matriz de publicación.
La idea 34A0C96A1938594B4A1C7B5CA83AF32 está cargada.
También decidí usar Axios en lugar de la API de Fetch Native para tomar publicaciones de la API REST WordPress. Me siento más cómodo de usar Axios para consumir datos de API, pero puede elegir y usar jQue (que ya está incluido en WordPress) para hacer llamadas AJAX. Nota: Para usar Axios, deberá instalarlo como adicción a la producción, ejecutando NPM Install Axios en la carpeta VUE Project. Hacer cargo de los campos específicos de la API REST WordPress. Descubrí recientemente que puede usar el parámetro _fields para tomar solo los campos necesarios en la respuesta de la API. Esto reduce significativamente el tamaño de la carga útil, especialmente cuando no desea el contenido de publicación en la respuesta JSON. Para hacer esto, simplemente agregue el parámetro _fields con una lista de nombres de campo separables como valores: wp/v2/publica? _Fields = id, título, extractuización del parámetro _fields para incluir selectivamente campos en la respuesta JSON
El parámetro _fields todavía tiene que encontrar su camino en el resto de la API REST, por lo que es posible que desee vigilarlo. Haciéndose cargo de todas las publicaciones de la API REST WordPress En la actualidad, no hay forma de hacerse cargo de todas las publicaciones de la API REST WordPress. Para hacer esto, deberá ejecutar un bucle y realizar más solicitudes a la API hasta que se hayan hecho el control de los datos requeridos. Para calcular el número de solicitudes de API, utilizamos el parámetro de Per_Page = 100 y el encabezado X-WP-Tootal, que ofrece el número total de registros en la colección. El parámetro Per_page está actualmente limitado a 100 registros, por lo que tenemos que hacer más solicitudes a la API cuando hay más de 100 publicaciones. Verá esto en acción en el método get_posts del componente AppgetPosts en la esencia a continuación: Cargue la idea 8B67F4C78687F9322EBBB31B697517

En la esencia anterior, Get_Posts se invoca automáticamente cuando el componente está montado. Utilicé la función ES7 Async/Await para marcar el método como una función aynchrónica que contiene expresiones esperadas. Notará que la primera solicitud de Axios está marcada con espera – const respuesta = axios (…). Esto evita la ejecución de líneas de código posteriores hasta que se resuelva la demanda. Hice esto para hacerse cargo del encabezado Total X-WP para calcular el número requerido de solicitudes API. El segundo uso de la espera es al final, donde espera que todas las promesas se resuelvan con promesas. Sin embargo, puede reproducir los datos tan pronto como estén disponibles, de la siguiente manera:
La idea se carga 9BB57F1B71E4F903A1BB512B4299A43A

Con los datos necesarios disponibles, luego agregamos el cuadro de búsqueda y la lógica del filtro en una propiedad calculada. En la esencia a continuación, observe cómo FilterRedSults reemplazó WPPosts para invocar el componente AppDisplayPost. Cargue la idea 5F65B73B38E9F45BC34E0BCA8CD3A446
Los componentes de AppQuicksearch y AppFilterswitches con hermosos apeggosts de búsqueda y filtrado de datos, luego trasladamos la entrada del usuario al Padre AppquickSearch y utilizamos accesorios para transmitir datos a la cadena. Hemos creado un nuevo componente AppFilterSwitches para reproducir filtros de categoría utilizando el objeto WPData WPDATS. EMISS COMPONENTE Un evento personalizado de OnFilterTogle que debe escuchar el componente de Padre AppquickSearch. Finalmente, todos los componentes fueron amalgamados en AppquickSearch

Cargue el esencial BF1F0E523D685910A115CAD858C087B0
Finalmente, simplemente puse la construcción final generada al ejecutar la compilación de NPM Run.

Generando la compilación final con NPM Run Build
Si ha llegado tan lejos, debe sentirse cómodo para explorar el resto de la aplicación por su cuenta. Las versiones finales de los componentes tienen muchos más, pero se basan en todo lo que acaba de ver. Explorando los componentes de enrutamiento y almacenamiento en la vida, aunque podría haber completado la aplicación solo con la búsqueda rápida, agregué otro componente AppCustomSearch para explorar el enrutamiento VUE y cómo los diferentes componentes se pueden reutilizar fácilmente con los accesorios. Vue Router excede el alcance de este artículo, pero puede encontrar la funcionalidad del enrutamiento en SPA/SRC/App-Routes.js. Proporciona mapeo entre AppQuicksearch, AppCustOmsearch y enlaces de navegación. Si puede usar el enrutador VUE en una página de WordPress, recuerde que Vue usará URL ‘#’ para simular una página para que no se recarga al cambiar entre los enlaces del enrutador. Si intenta excluir el hash (vea mis comentarios en App-Rout.js), WordPress Rewrite API se hará cargo y llegará con un 404 inconfundible. El componente App.Vue aloja los componentes AppNavigation y Router-View. También notará que la vista del enrutador está envuelta con Keep-Alive para mantener los estados de los componentes y evitar reproducir AppquickSearch y AppCustOsearch cuando cambia entre ellos. ¡Eso es todo! Resumen, espero que hayas encontrado este elemento útil. Siéntase libre de jugar con mi aplicación Vue Search, que puede descargar como parte del tema para veintisiete niños aquí. ¿Puedes usarlo como un patio de recreo para practicar y desarrollar tus habilidades en WordPress y JavaScript moderno? ¿Integras Vue.js en WordPress? Háganos saber en los comentarios a continuación.

Etiquetas:
vue.js
API REST de WordPress