Utilice esta estructura de vista de inicio

Utilice esta estructura de vista de inicio

Tutorial de Vue.js para desarrolladores principiantes

Siempre que empiece a utilizar nueva tecnología en su flujo de desarrollo, puede sentirse al menos un poco intimidado. Especialmente cuando hay una gran cantidad de paquetes npm por ahí. Mezclar y combinar cosas a veces puede requerir mucho tiempo y esfuerzo, y generalmente es frustrante. Aquí es donde entra en juego el siguiente tutorial de Vue.js para desarrolladores novatos.

¿Qué es Vue.js? ¿Por qué debería importarle?

Vue.js o Vue para abreviar es un marco de JavaScript para crear interfaces de usuario. En comparación con otros marcos, como Angular o React, Vue es más accesible y no tiene una curva de aprendizaje tan pronunciada.

Vue también es modular y le permitirá dividir su código en componentes reutilizables. Cada uno de ellos tiene su propio marcado de código HTML, CSS y JavaScript.

¿Cuál es el alcance de este tutorial de Vue.js?

El objetivo de este breve tutorial de Vue.js es proporcionarle un andamiaje sobre el que pueda construir y experimentar con Vue. Vamos a echar un vistazo a una configuración básica de una aplicación Vue en el panel de WordPress.

(Nota; No le enseñaremos Vue per se en esta guía, pero puede seguir adelante y aprender más sobre el marco en el guía oficial después de configurar el proyecto aquí, con el que puede continuar experimentando una vez que hayamos terminado. Además, recomendamos algunas de las bibliotecas de componentes de Vue UI más interesantes que hacen que el proceso de desarrollo sea más eficiente).

Lo que vamos a hacer es usar una plantilla predefinida para complementos de WordPress usando Vue. Puede encontrarlo en el siguiente repositorio de GitHub si desea profundizar en su investigación: https://github.com/abaicus/vue-wp-bootstrap.

Tutorial de Vue.js: requisitos previos

Hay algunas cosas que ya debería haber configurado en su computadora para continuar siguiendo esta guía:

Primero, necesitará una pila LAMP: puede usar XAMPP en Windows o Mac, o Local by Flywheel en Mac, luego configure una nueva instalación local de WordPress usted mismo.

Asegúrate de tener el Administrador de paquetes de NodeJS (npm) instalado en su máquina. También deberá instalar otros dos paquetes a través del terminal: Vue CLI y Vue Model Initialization Tool. Asi que:

$ npm install -g @vue/cli
$ npm install -g @vue/cli-init

Después de instalar estas dos dependencias, debe reemplazar el directorio actual con el de su instancia local de WordPress. wp-content/plugins directorio y luego ejecute el siguiente comando allí:

$ vue init abaicus/vue-wp-bootstrap my-vue-dashboard-plugin

Luego, se le pedirá que responda algunas preguntas sobre la configuración de su proyecto.

Para el aviso de compilación, continúe y elija la primera opción por ahora “Runtime + Compile: recomendado para la mayoría de los usuarios”.

Puede habilitar ESLint linter si lo desea. Detectará todos los errores de pelusa en su proyecto, pero no necesariamente tiene que preocuparse por eso todavía.

Commit Lint y Pre-Commit Hooks están destinados a verificar sus mensajes de confirmación y código antes de enviar una confirmación a GitHub, para que todo esté ordenado y bien formateado.

Terminará con una terminal que se verá más o menos así una vez que haya terminado:

Puede continuar y seguir las instrucciones en pantalla. Cambie el directorio al directorio de complementos recién generado y ejecute los comandos que se muestran en el indicador de la terminal. Esto permitirá que su aplicación se ejecute, esperando cambios en su código y transpilando el código de Vue en JavaScript.

¿Qué hace?

No mucho. Esta es solo una aplicación básica que muestra algunos datos del backend. No hay mucha vista debajo del capó. Puede ir a la página Panel de complementos y activarla. Agregará una nueva página a su menú de administración. Al acceder a él, encontrará una página de panel con dos cadenas:

La estructura de andamio del complemento

Echemos un vistazo a la estructura de archivos del complemento recién generado. Ignoraremos la mayoría de los archivos de configuración en este tutorial de Vue.js para que podamos centrarnos en la estructura de la aplicación:

Primero, tenemos el plugin.php archivo, que es el punto de entrada del complemento actual. Aquí tenemos las principales Conectar clasificar. Aquí es donde se incluyen y ejecutan los componentes principales de la aplicación.

Luego está el package.json archivo donde se definen todas las dependencias y un montón de otra información del proyecto. La parte que te puede interesar vive bajo el “Guiones” campo. Ahí tienes todos los comandos que puedes ejecutar con el npm run prefijo. Lo más importante, por ahora, debería ser npm run dev (quién crea la aplicación para el desarrollo) y npm run build (que debe ejecutar cuando esté listo para implementar su aplicación en producción). Los otros comandos son adyacentes a estos dos o hacen otras cosas de las que no debería tener que preocuparse todavía.

En el interior de includes directorio, hay tres archivos:

  • los rest.php la clase no hace nada por el momento, pero ya tienes una estructura para agregar tus rutas RestAPI
  • los assets.php la clase maneja el estilo y la cola de scripts. Aquí, el archivo JavaScript está localizado para pasar los datos semilla de PHP a nuestra aplicación Vue. Por el momento solo se envían dos SMS, pero puedes incluir lo que quieras.
  • los admin.php file es el que se encarga de agregar una nueva página al tablero y de representar la página del complemento real. Notará que la aplicación en sí se representa como dos vacíos <div> etiquetas dentro del plugin_page() función. Esto se debe a que JavaScript manejará la representación real de la aplicación después de que se haya cargado.

En el interior de assets directorio, encontrará otros cuatro directorios:

  • los src directorio: los archivos de origen de nuestra aplicación Vue, de los que hablaremos más adelante.
  • los scss directorio: los archivos de estilo SCSS a partir de los cuales generamos la hoja de estilo CSS.
  • los js directorio: el código transpilado que se genera a partir de nuestros archivos en el src directorio telefónico.
  • los css directorio – estilo compilado a partir de archivos SCSS.

los src Archivos de plantilla de vista y directorio

En este directorio hay dos archivos: main.js y App.vue. los main.js archivo es el punto de entrada de la aplicación. Adjunta el componente de la aplicación Vue al elemento DOM con el ID correspondiente.

/* jshint esversion: 6 */
import Vue from 'vue'
import App from './App.vue'

window.addEventListener('load', function () {
  new Vue({ // eslint-disable-line no-new
    el: '#mvdp-app',
    components: { App },
    render: (h) => h(App)
  })
})

El marcado de la aplicación real está dentro del App.vue modelo:

/* jshint esversion: 6 */
<template>
  <div>
    <h1>{{this.strings.title}}</h1>
    <p>{{this.strings.description}}</p>
  </div>
</template>

<script>
  /* global MVDP */
  export default {
    data () {
      return {
        strings: MVDP.strings
      }
    },
    name: 'App.vue'
  }
</script>

<style scoped>

</style>

Puede ver en el fragmento de arriba que estamos usando las cadenas que hemos ubicado en el Assets clasificar. Una de las grandes características de Vue es que el código del componente está perfectamente organizado en modelo, guión, y estilo facilitando la comprensión de la estructura.

Ahí lo tienes, ¡ahora tienes un punto de partida sólido para cualquier cosa que quieras desarrollar más con Vue.js! Espero que este tutorial de Vue.js haya sido útil.

No olvide unirse a nuestro curso intensivo sobre cómo acelerar su sitio de WordPress. Con algunas correcciones simples, puede reducir su tiempo de carga en un 50-80%:

Maquetación, presentación y edición a cargo de Karol K.

O inicie la conversación en nuestro Grupo de Facebook para profesionales de WordPress. Encuentre respuestas, comparta consejos y obtenga ayuda de otros expertos en WordPress. Únase a él ahora es gratis)!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Ir arriba