Herramientas y prácticas para acelerar el proceso de desarrollo de Vue.js

Publicado: 2022-03-10
Resumen rápido ↬ Aunque Vue.js afirma tener un marco minimalista accesible que puede adaptarse gradualmente, puede ser un poco abrumador cuando se comienza como un novato de Vue.js. En este artículo, estamos buscando formas de hacer que escribir Vue.js sea muy fácil.

A lo largo de este tutorial, veremos las prácticas que deben adoptarse, las cosas que deben evitarse y veremos más de cerca algunas herramientas útiles para facilitar la escritura de Vue.js. Me centraré principalmente en Vue 2, ya que la mayoría de las personas y organizaciones todavía usan la versión anterior. Sin embargo, no hay razón para preocuparse, ya que la mayoría de las cosas mencionadas aquí todavía se aplican a Vue 3, ya que es solo una versión supercargada y más rápida. Aún así, si ya conoce Vue 2 y solo desea conocer las novedades de Vue 3, puede consultar la guía de migración para obtener más información.

Nota: este artículo está dirigido a desarrolladores principiantes y experimentados que desean mejorar sus habilidades con Vue.js. El conocimiento básico de JavaScript y Vue.js será de gran beneficio a medida que avance en este tutorial.

Estructuración de proyectos basada en módulos frente a basada en archivos

Comencemos por ver cómo estructurar archivos por módulos, cómo la estructuración basada en archivos puede no ser una buena idea cuando se trata de crear proyectos de escala y cómo estructurar módulos para que se ajusten a los requisitos comerciales.

Como estamos creando un proyecto con Vue.js CLI, estamos obteniendo la estructura de archivos predeterminada que ha sido asignada por el equipo de Vue.js. Usar la estructura de archivos propuesta no es una mala manera de estructurar su proyecto per se, pero a medida que su proyecto crece, necesitará una mejor estructura ya que su código se agrupa y es más difícil navegar y acceder a los archivos.

Aquí es donde entra en juego el método basado en módulos para estructurar su proyecto .

Una mala forma de estructurar su proyecto implicará almacenar diferentes datos que no están relacionados con la misma carpeta, como el componente de notificación y el componente de autenticación en la carpeta del componente raíz:

 +-- src/ | +-- assets/ | +-- logo.png | +-- userprofile.png | +-- components | +-- NotificationBar.vue | +-- LoginForm.vue | +-- DashboardInfo.vue | +-- AuthenticationModal.vue | +-- main.js

Entonces, lo que queremos hacer es desacoplar el proyecto según la lógica comercial y las preocupaciones para que tengamos algo como un módulo de autenticación, un módulo de producto, un módulo de servicio, etc. De esta manera, podemos asegurarnos de que todo lo relacionado con esa función en particular se incluya en el módulo, lo que hace que nuestro código sea más ordenado y que la navegación no sea tan difícil.

 +-- modules/ | +-- AuthModule/ | +-- assets/ | +-- userprofile.png | +-- Components/ | +-- Authentication.vue | +-- login.vue | +-- NotificationModule | +-- assets/ | +-- Alert.png | +-- Components/ | +-- NotificationBar.vue | +-- ProductModule/

Organizar Módulos

Hay dos formas de organizar los módulos:

  1. Módulos principales de Vue.js,
  2. Módulos de características de la aplicación.

Los módulos principales de Vue.js están aquí para facilitar el desarrollo de Vue.js. Los módulos como el módulo de servicio que contiene todas las solicitudes de red que necesita la empresa se mantienen en este módulo central y todas las solicitudes de red correspondientes se realizan desde aquí.

Modularizar su aplicación de acuerdo con las características es una excelente manera de crear una mejor estructura de archivos en su aplicación. Esto permitirá la separación de su preocupación y se asegurará de que solo esté trabajando en la función que usted o su equipo están asignados. Otra ventaja de la modularización según la función es su capacidad de mantenimiento y la capacidad de evitar deudas técnicas a largo plazo en las que podría ser necesario volver a trabajar en la aplicación.

Ahora, cada vez que sea necesario agregar, eliminar o cambiar el estado de una función en particular, todo lo que debemos hacer es navegar hasta esa función y realizar cambios sin romper la aplicación. Este método de modularización permite un desarrollo eficiente del programa y una fácil depuración y modificación en nuestra aplicación.

Por ejemplo, una función de pago asignada a usted y a su equipo es un buen momento para implementar un módulo de payout que encapsule todas las funcionalidades y datos de la función.

 +-- modules/ | +-- payout/ | +-- index.js | +-- assets/ | +-- Components/ | +-- PayOut.vue | +-- UserInfo.vue | +-- store/ | +-- index.js | +-- actions.js | +-- mutations.js | +-- Test/

Según nuestra función de pago anterior, tenemos un archivo index.js para importar y usar complementos asociados solo con el módulo de pago. La carpeta de recursos alberga todos los recursos (imágenes y estilos) del módulo. Nuestra carpeta de componentes contiene componentes relacionados con la función de pago. La carpeta de la tienda contiene nuestras acciones, mutaciones y captadores utilizados para administrar el estado de esta función. También hay una carpeta de prueba para realizar pruebas de esta función.

¡Más después del salto! Continúe leyendo a continuación ↓

Uso de directivas personalizadas

Las directivas en Vue.js son una forma de decirle a Vue.js que haga algo o muestre un cierto comportamiento para nosotros. Ejemplos de directivas son v-if , v-model , v-for , etc. En nuestra aplicación Vue.js, cuando usamos algo como v-model para vincular datos a una entrada en un formulario, estamos dando el Vue.js codifica algunas instrucciones específicas que son propias de Vue.js. Pero, ¿qué pasa si queremos una acción o comportamiento en particular que nuestra directiva proporcionada por Vue.js no nos permite hacer? ¿Qué hacemos entonces? Podemos crear lo que llamamos directivas personalizadas.

Registro de directivas personalizadas y ganchos de directivas

Podemos proceder al registro de directivas de dos formas:

  1. Globalmente
    En nuestro archivo main.js
  2. En la zona
    En nuestro componente.

Los ganchos en las directivas son como métodos que se activan cuando ocurre cierta acción en nuestras directivas. Al igual que los ganchos del ciclo de vida de los ganchos creados y montados , se nos proporcionan ganchos para usar en nuestras directivas.

Digamos que estamos construyendo una aplicación y en una de nuestras páginas, queremos que el color de fondo cambie siempre cada vez que navegamos hacia ella. Vamos a nombrar esta directiva colorChange . Podemos lograrlo con la ayuda de una directiva.

Nuestra plantilla se parece a esto:

 <template> <div v-color-change> <HelloWorld msg="Hello Vue in CodeSandbox!"/> </div> </template>

Podemos ver la directiva personalizada arriba, pero para que funcione, en nuestro archivo main.js agregamos:

 // custom directive Vue.directive("color-change", { bind: function (el) { const random = Math.floor(Math.random() * 900000) + 100000; el.style.backgroundColor = `#${random}` } })

La directiva Vue.js anterior toma el nombre de la directiva como primer argumento y luego un Object como segundo argumento que controla el comportamiento de las directivas. bind es uno de los ganchos de los que hablamos y se llamará una vez que la directiva esté vinculada al elemento. Acepta los siguientes argumentos:

  • el
    Este es el nodo de elemento al que hemos adjuntado la directiva.
  • binding
    Contiene propiedades útiles que cambian el comportamiento de la directiva.
  • vnode
    Este es el nodo virtual de Vue.js.

Hemos creado un conjunto aleatorio de números de 6 dígitos para que podamos usarlo para cambiar el código hexadecimal de nuestro estilo de color de fondo.

Mejores prácticas al escribir directivas personalizadas

Hemos creado una directiva personalizada para lo anterior, pero debemos tomar nota de algunas cosas. Aparte de el , nunca modifique los argumentos de enganche y asegúrese de que los argumentos sean de solo lectura porque los argumentos de enganche son objetos con métodos nativos que pueden causar efectos secundarios si se modifican. Si es necesario, use el conjunto de datos de Vue.js para compartir información entre ganchos.

Si usamos la compilación CLI de Vue.js, las directivas personalizadas deben estar en el archivo main.js para que todos los archivos .vue puedan tener acceso a él. El nombre de su directiva debe ser algo que resuene con lo que hace esa directiva en particular, muy descriptivo sobre la funcionalidad de la directiva.

Puedes ver y jugar más con el código en este codesandbox que he creado. También puede leer más sobre esto en los documentos de Vue.

Control de actualizaciones

El sistema de reactividad de Vue.js es poderoso en el sentido de que detecta cosas que necesitan actualización y las actualiza sin que usted como desarrollador haga nada. Por ejemplo, volver a renderizar una página cada vez que navegamos hacia ella. A veces, el caso puede ser diferente, ya que podríamos encontrarnos escribiendo código que requiera que fuercemos una actualización.

Nota: Si necesita forzar una actualización, que es una ocasión poco frecuente, es posible que deba comprender realmente la reactividad de Vue y cómo usar correctamente los accesorios para comunicar datos dinámicos.

Forzar una actualización para que ocurra

En la mayoría de los casos, cuando cambia el valor en el objeto de datos vue, la vista se vuelve a representar automáticamente, pero no siempre es así. un caso clásico de nuestra vista, no volver a renderizar, es cuando usamos un v-for en nuestra plantilla para recorrer algunos datos en el objeto de datos, y no agregamos un valor :key en el bucle v-for .

 <div v-for="item in itemsArray" :key="item">

Esto le da a Vue.js una forma de rastrear la identidad de cada nodo y volver a representar la vista para cualquier cambio.

Una situación rara que puede hacer que forcemos una actualización es si intencionalmente o accidentalmente configuramos un elemento de matriz con el índice.

 var app = new Vue({ data: { items: ['1', '2'] } }) app.items[1] = '7' //vue does not notice any change

Hay diferentes formas de forzar una actualización o volver a renderizar. Algunas son prácticas muy malas como el uso de v-if para volver a renderizar la página cuando es true , y cuando es falso, el componente desaparece y ya no existe. Esta es una mala práctica porque la plantilla nunca se destruye sino que se oculta hasta que se puede reutilizar.

 <template> <div v-if="show"> <button @click="rerender">re-render</button> </div> </template>
 <script> export default { data() { return { show: true, }; }, methods: { rerender() { this.show= false; this.$nextTick(() => { this.show = true; }); } } }; </script>

En el código anterior, el estado de show se establece inicialmente en verdadero, lo que significa que nuestro componente se representa inicialmente. Luego, cuando hacemos clic en el botón, se llama a la función rerender( ) y el estado de show se establece en false , y el componente ya no se procesa. En el siguiente tic, que es un solo ciclo de actualización de DOM, show se establece en true y nuestro componente se representa nuevamente. Esta es una forma muy hacky de volver a renderizar.

Me gustaría hablar sobre dos formas legítimas en que esto se puede hacer:

  1. $forceUpdate de Vue.
  2. Patrón de cambio de clave.

$forceUpdate de Vue: en el uso de $forceUpdate , los componentes secundarios no se procesan, solo la instancia de Vue.js, la instancia y los componentes secundarios con ranuras.

Globalmente podemos forzar la actualización:

 import Vue from 'vue'; Vue.forceUpdate();

Y localmente también:

 export default { methods: { methodThatForcesUpdate() { this.$forceUpdate(); } } }

Usar el patrón de cambio de clave, que es mucho mejor que el método $forceUpdate , es otra forma de hacerlo. La razón por la que el patrón de cambio de clave es mejor es que le permite a Vue.js saber qué componente está vinculado a un dato específico y cuando la clave cambia, destruye el componente anterior para crear uno nuevo, según matthiasg en este problema de Github. me encontré Puede usar un atributo :key para que Vue.js sepa qué componente está adjunto a un dato específico. Cuando la clave cambia, hace que Vue.js destruya el componente anterior y se crea uno nuevo.

 <template> <Child :key="key" /> </template> <script> export default { data() { return { key: 0, }; }, methods: { forceRerender() { this.key += 1; } } } </script>

Bibliotecas y optimización de terceros

Es casi inevitable que no utilicemos bibliotecas de terceros en nuestras aplicaciones. Las bibliotecas de terceros pueden comenzar a ser un problema si hacemos la vista gorda, aumentando el tamaño del paquete y ralentizando nuestra aplicación.

Recientemente utilicé la biblioteca de componentes Vuetify en un proyecto y verifiqué que el tamaño total del paquete era de 500 kb minificado. Cosas como esta pueden convertirse en un cuello de botella en nuestra aplicación. Puede verificar el tamaño del paquete de su aplicación usando webpack-bundle-analyzer . Puedes instalarlo ejecutando:

 npm install --save-dev webpack-bundle-analyzer

e inclúyalo en el archivo de configuración de su paquete web:

 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ new BundleAnalyzerPlugin() ] }

Buenas prácticas para optimizar su aplicación Vue

  • Nuestro paquete principal solo debe contener dependencias que son críticas para nuestra aplicación, como vue , vuex . Deberíamos evitar poner bibliotecas que se usan en rutas específicas en nuestra aplicación en el paquete principal.
  • Al usar bibliotecas de componentes, puede importar componentes individuales de las bibliotecas, en lugar de importar todo. Por ejemplo, vuetificar:
 <template> <v-app> <v-navigation-drawer app> <!-- --> </v-navigation-drawer> <v-app-bar app> <!-- --> </v-app-bar> </v-app> </template> <script> import { VApp, VNavigationDrawer, VAppBar } from 'vuetify/lib' export default { components: { VApp, VNavigationDrawer, VAppBar, } } </script>

Al hacer lo anterior, hemos reducido el tamaño del paquete y el código redundante, usando solo los componentes que queremos usar en esa ruta en particular.

Tomar decisiones tempranas para usar Vuex

A menudo me he preguntado si debería iniciar un proyecto con Vuex. A veces solo quiero comenzar un pequeño proyecto paralelo y lo comienzo sin Vuex para administrar mi estado y la comunicación con accesorios comienza a complicarse.

Entonces, ¿cuándo deberíamos usar Vuex? Para responder a esto, debemos considerar:

  • Tamaño del proyecto,
  • La simplicidad del código,
  • enrutamiento,
  • Conjunto de datos involucrado,
  • Anidamiento de componentes.

Si su aplicación comienza a crecer, solo es apropiado incluir Vuex para administrar el estado en su aplicación. Si alguna vez tiene dudas sobre si debe usar un administrador de estado al iniciar su proyecto, simplemente utilícelo. Sin embargo, se habla de que la nueva API de composición de Vue3 es un reemplazo de vuex.

Cómo se debe configurar Vuex para aplicaciones grandes

Tenemos cuatro componentes en la tienda vuex:

  • Estado : Almacenar datos en nuestra tienda.
  • Getters : recuperar datos de estado.
  • Mutaciones : se utiliza para mutar datos de estado.
  • Acción : se utiliza para cometer mutaciones.

Cuando usamos lo anterior en Vuex, debemos tener en cuenta que las acciones siempre deben cometer mutaciones sin importar qué. Esto permite que nuestras herramientas de desarrollo puedan realizar un seguimiento de los cambios y volver a un período particular en nuestro estado y se deben llevar a cabo operaciones asincrónicas o lógica comercial en las acciones.

Puede crear un archivo separado para cada uno de los componentes de Vuex para que se vea así:

 ├── services ├── main.js └── store ├── index.js ├── actions.js ├── mutations.js └── Getters.js ├── components

Modulación según característica

Si nuestro proyecto es un proyecto muy grande con un equipo, podemos modularizar nuestra tienda según las características de la aplicación. Esto se hace especialmente cuando hay proyectos grandes y complejos con muchos archivos y carpetas y solo queremos una forma organizada de manejar la estructuración de nuestra aplicación. Tenemos que tener cuidado con la forma en que hacemos esto, si no podemos hacer más daño que bien. Una tienda simple modularizada de acuerdo con la característica se ve así:

 store/ ├── index.js └── modules/ ├── cart ├── index.js ├── actions.js ├── mutations.js ├── product.js ├── login.js

Buenas prácticas al usar módulos Vuex

A medida que los módulos que hemos creado se vuelven más complicados, se vuelve más difícil importarlos y organizarlos manualmente. Se recomienda que sus módulos tengan un archivo index.js en la raíz de su módulo, reuniendo todos los archivos.

Asegúrese de tener un patrón de nombres estándar en su tienda, ya que esto aumentará la capacidad de mantenimiento. Puede usar camelCase para nombrar los módulos y luego una extensión .store.js . Ejemplo: CartData.store.js .

 modules/ ├── cart.js ├── index.js -> auto export module ├── userProduct.store.js ├── userData.store.js

El código relacionado con la lógica empresarial o el código asíncrono no debe ejecutarse dentro de las mutaciones debido a su comportamiento de bloqueo; en su lugar, se deben usar acciones. Se considera una buena práctica no acceder directamente a un objeto de estado. En su lugar, use la función getter porque se puede asignar a cualquier componente de vue usando los mapGetters que se comportan como una propiedad calculada con el resultado de los getters almacenado en caché en función de sus dependencias. Además, asegúrese de que cada módulo tenga un espacio de nombres y no acceda a ellos utilizando el ámbito de estado global.

Uso del método Provide/Inject para pasar datos

Piense en una aplicación que tenga diferentes componentes. Tenemos el componente principal y el componente principal tiene muchos componentes secundarios. En la imagen a continuación, vemos nuestro componente secundario A, B y D como componentes superiores, luego vemos el componente E anidado en el componente D y el componente F anidado en el componente E. ¿Qué pasa si tenemos datos de la aplicación (como la dirección del usuario), que queremos usar en el componente secundario A, C y F, y estos datos de dirección de usuario están en nuestro componente principal.

Una imagen que muestra cómo se usa proporcionar/inyectar para pasar datos al componente secundario
La arquitectura de la comunicación padre-hijo. (Vista previa grande)

Para hacer esto, necesitamos:

  • Proporcione valor en el componente principal (proveedor de dependencia).
  • Inyecte el valor en el componente F (consumidor de dependencia).

En nuestro componente padre proporcionamos los datos:

 app.component('parent-component', { data() { return { user: {name:"Uma Victor", address:"No 33 Rumukwurushi"} } }, provide() { return { userAddress: this.user.address } }, template: ` ... ` })

Usamos provide como una función al devolver un objeto para acceder a las propiedades de la instancia del componente.

En nuestro componente child-f , tenemos lo siguiente:

 app.component('child-f', { inject: ['userAddress'], template: ` <h2>Injected property: {{ this.userAddress }}</h2> ` })

Sin embargo, notamos que si cambiamos nuestra dirección de user.address a otra dirección, el cambio no se reflejará en nuestro valor inyectado, esto se debe a que los datos proporcionados para proporcionar/inyectar no son reactivos inicialmente. Podemos arreglar esto pasando un objeto reactive para provide . Tenemos que asignar una propiedad calculada a nuestro objeto de usuario.

 app.component('parent-component', { data() { return { user: {name:"Uma Victor", address:"No 33 Rumukwurushi"} } }, provide() { return { userAddress: Vue.computed(() => this.user) } }, template: ` ... ` })

Este patrón puede ser muy útil y más simple que usar Vuex.

Sin embargo, con Vue3 y la actualización reciente, ahora podemos usar proveedores de contexto, lo que nos permite compartir datos entre múltiples componentes como vuex.

Uso adecuado de accesorios para componentes de formulario

Crear formularios en la web es una de esas cosas que no a todo el mundo le gusta hacer. Vue.js facilita la creación de formularios excelentes. Para lograr esto, necesitamos saber cómo usar correctamente los accesorios en los componentes de nuestro formulario. En una aplicación tradicional en la que tenemos registros, inicios de sesión o páginas de productos, queremos tener un comportamiento y un diseño coherentes. Por ejemplo, la página de inicio de sesión a continuación.

Una imagen de un formulario de inicio de sesión
Un sencillo formulario de registro. (Vista previa grande)

Con el código:

 <template> <div class="form-group"> <form> <label for="email">Your Name</label> <input type="text" class="form-control" placeholder="name" v-model="userData.name" /> <label for="email">Your Email Address</label> <input type="text" class="form-control" placeholder="Email" v-model="userData.email" /> <label for="email">Your Password</label> <input type="text" class="form-control" placeholder="password" v-model="userData.password" /> </form> </div> </template> <script> export default { data() { return { userData: { name: '', email: '', password: '' } } }, } </script>

Nos gustaría tener un componente BaseInput que podamos usar para las tres entradas de formulario anteriores. Nuestro BaseInput se ve así:

 <template> <div> <label v-if="label">{{ label }}</label> <input type="email" @value="value" @input="updateInput" v-bind="$attrs"> </div> </template> <script> export default { props: { label: { type: String, default: "" }, value: [String, Number] }, methods: { updateInput(event) { this.$emit('input', event.target.value) } } } </script>

Queremos que nuestro BaseInput acepte una label prop que siempre es una cadena, y si la Entrada tiene una etiqueta, la mostramos en nuestra plantilla como podemos ver arriba.

Cuando llenamos el formulario, se activa el método updateInput . El método updateInput toma el evento de entrada como argumento y emite un evento con el nombre de Entrada, junto con la carga útil event.target.value que es el nombre (John Doe) en la forma:

 <BaseInput label="Your Name" v-model="userData.name" placeholder="Name"/>

El v-model escuchará el evento de entrada y luego, cuando lo obtenga, establecerá nuestro userData.name en la carga útil que obtuvo.

Si queremos establecer un marcador de posición para una entrada, es posible que experimentemos un error, esto se debe a que en vue2 los atributos siempre se adjuntan al elemento principal, por lo que para solucionar esto establecemos inheritAttrs en false y attrs .

 <script> export default { inheritAttrs: false, props: { label: { type: String, default: "" }, value: [String, Number] }, methods: { updateInput(event) { this.$emit('input', event.target.value) } } } </script>

Hasta donde queremos que esté el atributo de marcador de posición. Nuestro código de página de formulario se ve así ahora:

 <template> <div class="form-group"> <form> <BaseInput label="Your Name" v-model="userData.name" placeholder="Name"/> <BaseInput label="Your Email Address" v-model="userData.email" placeholder="Email"/> <BaseInput label="Your Password" v-model="userData.password" placeholder="Password"/> </form> </div> </template>

Finalmente tenemos un componente de formulario reutilizable independiente. Puedes jugar con el código en el codesandbox que hice.

Nota: $Attrs en Vue3 ahora incluye todos sus oyentes, enlaces de estilo y clases.

Familiarizarse con Vue Devtools

Vue.js Devtools es una herramienta muy poderosa ya que nos ayuda a depurar nuestra aplicación de manera efectiva en tiempo real. Es más poderoso cuando usamos Vuex y tenemos que administrar mutaciones y realizar un seguimiento de los cambios en nuestra aplicación. La mayoría de los desarrolladores de Vue.js usan devtools como una extensión, pero también podemos instalarlo como una aplicación independiente.

Nota: Las herramientas de desarrollo de Vue.js solo funcionan en el modo de desarrollo de su compilación y no funcionarán en producción, por lo que otras personas no pueden usarlas para inspeccionar su aplicación.

Instalar Devtools como una aplicación independiente

Quizás se pregunte por qué querríamos instalar una aplicación independiente para devtools cuando podemos usar la extensión del navegador para ello. Es porque cuando lo instala como una aplicación independiente localmente, puede usarlo desde cualquier navegador.

Lo instalamos:

 // Globally npm install -g @vue/devtools // or locally npm install --save-dev @vue/devtools

Una vez que haya terminado de instalar, ejecute:

 vue-devtools

Luego, en nuestro archivo index.html , ubicado en la carpeta pública en la raíz de nuestra aplicación Vue.js, agregamos:

 <script src="https://localhost:8098"></script>

Una vez que su aplicación se vuelve a cargar, se conectará automáticamente.

Algunas operaciones que podemos hacer con Vue Devtools

Aquí hay algunas operaciones útiles que puede hacer en Vue.js DevTools.

  • Tema oscuro
    En las nuevas DevTools, ahora hay una opción para establecer entre temas claros, oscuros o de contraste. Puede hacer esto yendo a su configuración global y seleccionándolo.
Vue devtools en modo oscuro
Vue devtools en modo oscuro. (Vista previa grande)
  • Cronología
    La nueva línea de tiempo en las herramientas de desarrollo muestra información sobre los eventos que ocurren y está organizada en orden cronológico. Se encuentra junto al inspector y la vista de configuración.
Cronología de las herramientas de desarrollo de Vue
Cronología de las herramientas de desarrollo de Vue. (Vista previa grande)
  • Dar formato al nombre del componente
    Puede optar por mostrar el nombre de su componente en camelCase o kebab-case.

Hay muchas otras operaciones que puede utilizar en las herramientas de desarrollo de vue. Puedes consultar su registro de cambios.

Herramientas para facilitar el trabajo en Vue

Cuando trabajamos con Vuejs, es posible que encontremos algunas características que nos encantaría implementar, pero puede llevar mucho tiempo codificar o simplemente un poco difícil de implementar. Como desarrolladores profesionales, agregamos ciertas herramientas y bibliotecas de ayuda para facilitar las cosas y estaríamos analizando algunas de ellas.

Bibliotecas de prueba

Las pruebas pueden desempeñar un papel crucial al crear aplicaciones a gran escala. Nos ayuda a evitar errores innecesarios durante el desarrollo cuando trabajamos con un equipo. Veamos los tres tipos de pruebas que podemos realizar en nuestra aplicación Vue y sus marcos.

  • Pruebas de componentes
    Biblioteca de pruebas de Vue, Vue Test Utils.
  • Examen de la unidad
    Broma, Moka.
  • Pruebas de extremo a extremo
    Nightwatch.js, Cypress.

Bibliotecas de componentes

Una biblioteca de componentes es un conjunto de componentes reutilizables que podemos usar en nuestra aplicación para hacer que el desarrollo de la interfaz de usuario sea mucho más rápido y consistente en nuestra aplicación. Al igual que React y Angular, Vue tiene su propio conjunto de bibliotecas de componentes. Algunos de ellos incluyen:

  • Kit de materiales Vue
    Un kit de interfaz de usuario "Badass" Vue.js basado en el diseño de materiales. Contiene más de 60+ componentes hechos a mano.
  • Buefy
    Una biblioteca de componentes ligeros basada en el marco Bulma CSS. Si se siente cómodo con SASS, no tendrá problemas para usarlo.
  • Vuetificar
    Este es también un marco de componentes de diseño de materiales con la disponibilidad de andamios ya creados para el código, con una gran comunidad y actualizaciones periódicas.
  • Quásar
    Mi favorito personal, cuando se trata del marco de componentes. Quasar, con su pila de frontend de alto rendimiento, le permite crear aplicaciones multiplataforma para web, móvil y escritorio.

Otras bibliotecas interesantes

Otras bibliotecas dignas de mención son:

  • ArchivoEstanque
    Esta biblioteca de Vue.js carga cualquier imagen que le proporcione y optimiza esas imágenes con una experiencia suave como la seda.
  • Vuelidate
    Esta biblioteca es muy importante cuando se trabaja con formularios y necesita una forma de validar las entradas de los usuarios en la interfaz. Es una validación basada en modelos simple y ligera.
  • vue-Clickaway
    Vue no tiene un detector de eventos nativo para saber cuándo un usuario ha hecho clic fuera de un elemento, por ejemplo, un menú desplegable, por eso existe vue-clickaway para detectar eventos de clic.

Hay muchas más bibliotecas por ahí. Puede consultar una gran cantidad de ellos en madewithvuejs.com y vuejsexamples.com .

Extensiones útiles para ayudarlo a escribir Vue

Las extensiones son herramientas realmente útiles, que pueden marcar una gran diferencia en su productividad diaria al escribir vuejs. Durante el tiempo que pasé escribiendo el código de Vuejs, encontré las siguientes extensiones muy útiles:

  • Vetur
    Esta es la extensión número uno en mi lista. Ahorrándome horas al escribir Vuejs. Proporciona resaltado específico, fragmentos, Intellisense, depuración y mucho más para Vue.js.
  • Marcadores
    Esta extensión es muy útil cuando se trabaja en un proyecto grande porque puede marcar y establecer un marcador en lugares de su código y saltar a ese lugar específico cuando lo desee.
  • Eslint
    Eslint nos ayuda a encontrar fácilmente errores de codificación lanzando una advertencia si hacemos algo mal en el código. Es recomendable usarlo en un formato más bonito.
  • Paquete de extensión Vue.js
    Este paquete de extensión contiene una colección de otras extensiones que lo ayudarán en su desarrollo de Vue.js como Prettier, Vetur, Night Owl, etc.

Conclusión

En este tutorial, hemos analizado algunos consejos y herramientas para ayudarlo a convertirse en un mejor desarrollador de Vue. Comenzamos con algunas ideas útiles sobre cómo organizar nuestros proyectos para escalar y otros puntos importantes a tener en cuenta y lo redondeamos con herramientas y extensiones que facilitan mucho la escritura de Vuejs.

Tenga en cuenta que la mayor parte de lo que se aprende en este artículo se centra en Vue.js 2, para evitar malentendidos.

Más recursos

Aquí hay algunos enlaces útiles que puede consultar si desea profundizar en algunas de las cosas que discutimos anteriormente.

  • "Directivas personalizadas", Documentos oficiales
  • "Reactividad de Vue", Documentos oficiales
  • Sitio web "Vue Devtools"
  • Charla sobre Composición API vs Vuex
  • Herramientas útiles para el desarrollo de javascript por Timi Omoyeni