Herramientas útiles en el desarrollo web Vue.js

 

 

 


Índice
  1. notificación vue
    1. Instalación
  2. Vuelida
    1. Instalación
  3. Estado persistente de Vuex
    1. Instalación
  4. Conclusión
    1. Recursos adicionales

Hay algunas herramientas que los desarrolladores que recién están comenzando con Vue o, a veces, tienen experiencia en la creación con Vue, a veces no saben que existen para facilitar mucho el desarrollo en Vue. En este artículo, veremos algunas de estas bibliotecas, qué hacen y cómo usarlas durante el desarrollo.

 

Cuando se trabaja en un nuevo proyecto, hay ciertas características que son necesarias dependiendo de cómo se supone que se utilizará la aplicación. Por ejemplo, si va a almacenar datos específicos del usuario, necesitará gestionar las autenticaciones, lo que requerirá la configuración de un formulario que deberá validarse. Cosas como la autenticación y las validaciones de formularios son comunes; existen soluciones que posiblemente se ajusten a su caso de uso.

Para utilizar adecuadamente su tiempo de desarrollo, es mejor utilizar lo que está disponible, en lugar de inventar el suyo.

Como nuevo desarrollador, existe la posibilidad de que no esté al tanto de todo lo que le ofrece el ecosistema Vue. Este artículo ayudará con eso; Cubrirá ciertas herramientas útiles que le ayudarán a crear mejores aplicaciones Vue.

Nota : Existen alternativas a estas bibliotecas y este artículo de ninguna manera las coloca sobre las demás. Son solo con los que he trabajado.

Este tutorial está dirigido a principiantes que recién comenzaron a aprender sobre Vue o que ya tienen conocimientos básicos de Vue. Todos los fragmentos de código utilizados en este tutorial se pueden encontrar en mi GitHub .

notificación vue

Durante la interacción del usuario, a menudo es necesario mostrarle un mensaje de éxito, un mensaje de error o información aleatoria. En esta sección, veremos cómo mostrar mensajes y advertencias a su usuario usando vue-notification. Este paquete proporciona una interfaz con una animación/transición agradable para mostrar errores, información general y mensajes de éxito a su usuario en toda su aplicación y no requiere mucha configuración para comenzar a funcionar.

 

Instalación

Puede instalar vue-notificationen su proyecto usando Yarn o NPM dependiendo del administrador de paquetes de su proyecto.

Hilo

yarn add vue-notification

npm

npm install --save vue-notification

Una vez completada la instalación, lo siguiente sería agregarlo al punto de entrada de su aplicación, el archivo main.js.

principal.js

//several lines of existing code in the file import Notifications from 'vue-notification' Vue.use(Notifications) 

En este punto, solo necesitamos agregar el componente de notificaciones en el archivo App.vue antes de poder mostrar notificaciones en nuestra aplicación. La razón por la que agregamos este componente al archivo App.vue es para evitar repeticiones en nuestra aplicación porque no importa la página en la que se encuentre el usuario en nuestra aplicación, los componentes en App.vue (por ejemplo, los componentes de encabezado y pie de página) siempre estar disponible. Esto elimina la molestia de tener que registrar el componente de notificación en cada archivo que necesitamos para mostrar una notificación al usuario.

aplicación.vue

template div div router-link to="/"Home/router-link | router-link to="/about"Notifications/router-link /div notifications group="demo"/ router-view / /div/template

Aquí, agregamos una instancia de este componente que acepta un groupaccesorio que se usaría para agrupar los diferentes tipos de notificaciones que tenemos. Esto se debe a que el componente de notificaciones acepta una serie de accesorios que dictan cómo se comporta el componente y veremos algunos de ellos.

  1. group
    Este accesorio se utiliza para especificar los diferentes tipos de notificaciones que puede tener en su aplicación. Por ejemplo, puede decidir utilizar diferentes estilos y comportamientos dependiendo del propósito que se supone que debe cumplir la notificación, la validación del formulario, la respuesta de la API, etc.
  2. type
    Este accesorio acepta un valor que sirve como 'nombre de clase' para cada tipo de notificación que tenemos en nuestra aplicación y los ejemplos pueden incluir success, errory warn. Si utilizamos cualquiera de estos como tipo de notificación, podemos diseñar fácilmente el componente utilizando este formato de clase vue-notification + '.' + type, es decir , .vue-notification.warnpara warn, etc.
  3. duration
    Este accesorio especifica cuánto tiempo notificationdebe aparecer el componente antes de desaparecer. Acepta un número como valor msy también acepta un número negativo (-1) si desea que permanezca en la pantalla de su usuario hasta que haga clic en él.
  4. position
    Este accesorio se utiliza para configurar la posición desde la que desea que aparezcan las notificaciones en su aplicación. Algunas de las opciones disponibles son top left, top right, top center, bottom right, bottom lefty bottom center.

Podemos agregar estos accesorios a nuestro componente en App.vue para que ahora tenga este aspecto;

 

template div div router-link to="/"Home/router-link | router-link to="/about"Notifications/router-link /div notifications :group="group" :type="type" :duration="duration" :position="position" / router-view / /div/templatescript export default { data() { return { duration: -1, group: "demo", position: "top center", type: "info", }; }, };/scriptstyle .vue-notification.info { border-left: 0; background-color: orange; } .vue-notification.success { border-left: 0; background-color: limegreen; } .vue-notification.error { border-left: 0; background-color: red; }/style

También agregamos estilos para los diferentes tipos de notificaciones que usaríamos en nuestra aplicación. Tenga en cuenta que, aparte de group, podemos pasar cada uno de los accesorios restantes sobre la marcha siempre que queramos mostrar una notificación y seguirá funcionando en consecuencia. Para mostrar una notificación en cualquiera de sus archivos Vue, puede hacer lo siguiente.

vueFile.vue

this.$notify({ group: "demo", type: "error", text: "This is an error notification",});

Aquí, creamos una notificación de type errordebajo de la groupnotificación de demo. La propiedad textacepta el mensaje que desea que contenga la notificación y, en este caso, el mensaje es " Esta es una notificación de error". Así es como se vería la notificación en su aplicación.

vue-notificationen acción: notificación de error que se muestra en el navegador. ( Vista previa grande )

Puede encontrar otros accesorios disponibles y otras formas de configurar la notificación en la página de documentos oficiales .

Vuelida

Uno de los elementos más comunes utilizados en la web son los elementos de formulario ( ,,, input[type='text']etc. ) y siempre es necesario validar la entrada del usuario para asegurarse de que está enviando los datos correctos y/o utilizando el formato correcto en el campo de entrada. Con Vuelidate , puede agregar validación a los formularios en su aplicación Vue.js, ahorrando tiempo y beneficiándose del tiempo dedicado a este paquete. Había estado escuchando sobre Vuelidate por un tiempo, pero estaba un poco reacio a echarle un vistazo porque pensé que sería demasiado complejo, lo que significaba que estaba escribiendo validaciones desde cero para la mayoría de los campos de formulario en las aplicaciones en las que trabajaba.input[type='email']input[type='password']

Cuando finalmente miré los documentos, descubrí que no era difícil comenzar y que podía validar los campos de mi formulario en poco tiempo y pasar a lo siguiente.

Instalación

Puede instalar Vuelidate utilizando cualquiera de los siguientes administradores de paquetes.

Hilo

yarn add vuelidate

npm

npm install vuelidate --save

Después de la instalación, lo siguiente sería agregarlo a la configuración de su aplicación en el archivo main.js para que pueda usarlo en sus archivos vue.

 

import Vuelidate from 'vuelidate'Vue.use(Vuelidate)

Suponiendo que tiene un formulario similar a este en su aplicación;

vuelidate.vue

template form @submit.prevent="login" div label for="fullName"Full Name/label input type="text" name="fullName" v-model="form.fullName" / /div div label for="email"Email/label input type="email" name="email" v-model="form.email" / /div div label for="email"Age/label input type="number" name="age" v-model="form.age" / /div div label for="password"Password/label input type="password" name="password" v-model="form.password" / /div input type="submit" value="LOGIN" / p v-if="submitted"Form clicked/p /form/templatescript export default { data() { return { submitted: false, form: { email: null, fullName: null, age: null, password: null, }, }; }, methods: { login() { this.submitted = true; }, }, };/script

Ahora, para validar este tipo de formulario, primero debe decidir qué tipo de validación necesita para cada campo del formulario. Por ejemplo, puede decidir que necesita la duración mínima del fullNameto be 10y la edad mínima del to be 18.

Vuelidate viene con validadores integrados que solo necesitamos importar para usarlos. También podemos optar por validar el campo de contraseña en función de un formato particular, por ejemplo Password should contain at least a lower case letter, an upper case letter, and a special character. Podemos escribir nuestro propio pequeño validador que haga esto y conectarlo a la lista de complementos de Vuelidate.

Vayamos paso a paso.

Uso de validadores integrados

script import { required, minLength, minValue, email, } from "vuelidate/lib/validators"; export default { validations: { form: { email: { email, required, }, fullName: { minLength: minLength(10), required, }, age: { required, minValue: minValue(18), }, }, }, };/script

Aquí, importamos algunos validadores que necesitamos para validar correctamente nuestro formulario. También agregamos una validationspropiedad donde definimos las reglas de validación para cada campo del formulario que queremos validar.

En este punto, si inspeccionas las devTools de tu aplicación, deberías ver algo parecido a esto;

vuelidatepropiedad calculada ( vista previa grande )

La $vpropiedad calculada contiene varios métodos que son útiles para confirmar la validez de nuestro formulario, pero solo nos centraremos en algunos de ellos: Autoclave de vapor Blog

  1. $invalid
    Para comprobar si el formulario pasa toda la validación.
  2. email
    Para comprobar que el valor es una dirección de correo electrónico válida.
  3. minValue
    Para comprobar que el valor de agepasa la minValueverificación.
  4. minLength
    Para verificar la longitud de fullName.
  5. required
    Para garantizar que se proporcionen todos los campos obligatorios.

Si ingresa un valor agemenor que la edad mínima establecida en la validación y verificación $v.form.age.minValue, se establecerá en falsey esto significa que el valor en el campo de entrada no pasa la minValueverificación de validación.

 

Usar validadores personalizados

También necesitamos validar nuestro campo de contraseña y asegurarnos de que contenga el formato requerido, pero Vuelidate no tiene un validador incorporado que podamos usar para lograrlo. Podemos escribir nuestro propio validador personalizado que haga esto usando RegEx . Este validador personalizado se vería así;

script import { required, minLength, minValue, email, } from "vuelidate/lib/validators"; export default { validations: { form: {//existing validator rules password: { required, validPassword(password) { let regExp = /^(?=.*[0-9])(?=.*[!@#$%^*])(?=.*[A-Z]+)[a-zA-Z0-9!@#$%^*]{6,}$/; return regExp.test(password); }, }, }, }, };/script

Aquí, creamos un validador personalizado que usa una expresión regular para verificar que la contraseña contenga lo siguiente;

  1. Al menos una letra mayuscula;
  2. Al menos una letra minúscula;
  3. Al menos un carácter especial;
  4. Al menos un número;
  5. Debe tener una longitud mínima de 6.

Si intenta ingresar una contraseña que no cumple con ninguno de los requisitos enumerados anteriormente, se validPasswordestablecerá en false.

Ahora que estamos seguros de que nuestras validaciones están funcionando, debemos mostrar los mensajes de error apropiados para que el usuario sepa por qué no puede continuar. Esto se vería así:

template form @submit.prevent="login" div label for="fullName"Full Name/label input type="text" name="fullName" v-model="form.fullName" / p v-if="!$v.form.fullName.required" This field is required /p /div div label for="email"Email/label input type="email" name="email" v-model="form.email" / p v-if="!$v.form.email.required" This field is required /p p v-if="!$v.form.email.email" This email is invalid /p /div div label for="email"Age/label input type="number" name="age" v-model="form.age" / p v-if="!$v.form.age.required" This field is required /p /div div label for="password"Password/label input type="password" name="password" v-model="form.password" / p v-if="!$v.form.password.required" This field is required /p p v-else-if="!$v.form.password.validPassword" Password should contain at least a lower case letter, an upper case letter, a number and a special character /p /div input type="submit" value="LOGIN" / /form/template

Aquí, agregamos un párrafo que muestra un texto que le dice al usuario que un campo es obligatorio, que un valor ingresado para el correo electrónico no es válido o que la contraseña no contiene los caracteres requeridos. Si miramos esto en su navegador, verá que los errores ya aparecen debajo de cada campo de entrada.

 

Textos de error para cada campo de entrada ( vista previa grande )

Esto es malo para la experiencia del usuario, ya que el usuario aún debe interactuar con el formulario y, como tal, los textos de error no deberían ser visibles al menos hasta que el usuario intente enviar el formulario. Para solucionar este problema, agregaríamos submittedla condición requerida para que se muestren los textos de error y también cambiaríamos el valor de submitteda truecuando el usuario haga clic en el botón Enviar.

template form @submit.prevent="login" div label for="fullName"Full Name/label input type="text" name="fullName" v-model="form.fullName" / p v-if="submitted !$v.form.fullName.required" This field is required /p /div div label for="email"Email/label input type="email" name="email" v-model="form.email" / p v-if="submitted !$v.form.email.required" This field is required /p p v-if="submitted !$v.form.email.email" This email is invalid /p /div div label for="email"Age/label input type="number" name="age" v-model="form.age" / p v-if="submitted !$v.form.age.required" This field is required /p /div div label for="password"Password/label input type="password" name="password" v-model="form.password" / p v-if="submitted !$v.form.password.required" This field is required /p p v-else-if="submitted !$v.form.password.validPassword" Password should contain at least a lower case letter, an upper case letter, a number and a special character /p /div input type="submit" value="LOGIN" / /form/template

Ahora los textos de error no aparecen hasta que el usuario hace clic en el botón enviar y esto es mucho mejor para el usuario. Cada error de validación aparecerá si el valor ingresado en el formulario no satisface la validación.

Finalmente, solo querríamos procesar la entrada del usuario cuando todas las validaciones en nuestro formulario hayan pasado y una forma de hacerlo sería usar la $invalidpropiedad que formestá presente en la $vpropiedad calculada. Echemos un vistazo a cómo hacerlo:

methods: { login() { this.submitted = true; let invalidForm = this.$v.form.$invalid; //check that every field in this form has been entered correctly. if (!invalidForm) { // process the form data } }, },

Aquí, estamos verificando que el formulario se haya completado en su totalidad y correctamente. Si devuelve false, significa que el formulario es válido y podemos procesar los datos del formulario, pero si es así true, significa que el formulario aún no es válido y el usuario aún debe corregir algunos errores en el formulario. También podemos usar esta propiedad para deshabilitar o diseñar el botón de enviar según sus preferencias.

 

Estado persistente de Vuex

Durante el desarrollo, hay casos en los que almacenarías datos como la información y el token de un usuario en tu tienda Vuex. Pero los datos de su tienda Vuex no persistirán si sus usuarios intentan actualizar su aplicación desde el navegador o ingresar una nueva ruta desde la pestaña URL de su navegador y el estado actual de su aplicación se pierde con ello. Esto hace que el usuario sea redirigido a la página de inicio de sesión si la ruta está protegida con un protector de navegación , lo cual es un comportamiento anormal en su aplicación. Esto se puede solucionar con vuex-persistedstate, veamos cómo.

Instalación

Puede instalar este complemento utilizando cualquiera de los dos métodos:

Hilo

yarn add vuex-persistedstate

npm

npm install --save vuex-persistedstate

Una vez completado el proceso de instalación, el siguiente paso sería configurar este complemento para que esté listo para usar en su tienda Vuex.

import Vue from 'vue'import Vuex from 'vuex'import createPersistedState from "vuex-persistedstate";Vue.use(Vuex)export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: {}, plugins: [createPersistedState()]})

En este punto, toda nuestra Tienda Vuex se almacenaría en localStorage (de forma predeterminada), pero vuex-persistedstateviene con la opción de usar sessionStorageo cookies.

import Vue from 'vue'import Vuex from 'vuex'import createPersistedState from "vuex-persistedstate";Vue.use(Vuex)export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: {}, // changes storage to sessionStorage plugins: [createPersistedState({ storage: window.sessionStorage });]})

Para confirmar que nuestra Tienda persistirá después de actualizar o cerrar la pestaña del navegador, actualicemos nuestra tienda para que se vea así:

import Vue from 'vue'import Vuex from 'vuex'import createPersistedState from "vuex-persistedstate";Vue.use(Vuex)export default new Vuex.Store({ state: { user: null }, mutations: { SET_USER(state, user) { state.user = user } }, actions: { getUser({ commit }, userInfo) { commit('SET_USER', userInfo) } }, plugins: [createPersistedState()]})

Aquí, agregamos un userestado que almacenaría datos de usuario del formulario creado en la sección anterior. También agregamos una SET_USERmutación que se usaría para modificar el userestado. Finalmente, agregamos una getUseracción que recibiría el objeto de usuario y lo pasaría a la SET_USERpropiedad de mutación. Lo siguiente sería despachar esta acción luego de validar nuestro formulario exitosamente. Esto se parece a esto:

methods: { login() { this.submitted = true; let invalidForm = this.$v.form.$invalid; let form = this.form; //check that every field in this form has been entered correctly. if (!invalidForm) { // process the form data this.$store.dispatch("getUser", form); } }, },

Ahora, si completa correctamente el formulario, lo envía y abre la localStoragesección en la pestaña de aplicaciones en devTools de su navegador, debería ver una vuexpropiedad similar a esta:

Tienda Vuex en localStorage ( vista previa grande )

En este punto, si actualiza su navegador o abre su aplicación en una nueva pestaña, su userestado aún persistirá en estas pestañas/sesión (en el almacenamiento local).

Conclusión

Hay muchas bibliotecas que pueden resultar muy útiles en el desarrollo web de Vuejs y, a veces, puede resultar difícil elegir cuál utilizar o dónde encontrarlas. Los siguientes enlaces contienen bibliotecas que puede utilizar en su aplicación Vue.js.

  1. vuejsexamples.com .
  2. madewithvuejs.com .

A menudo hay más de una biblioteca que hace lo mismo que usted intenta lograr en su aplicación cuando busca una 'biblioteca'; lo importante es asegurarse de que la opción que elija funcione para usted y esté mantenida por sus creadores para que no cause que su aplicación se rompa .

Recursos adicionales

  • “ Notificaciones de Vue.js ”, documentos oficiales, GitHub
  • “ Vuelidate ”, Sitio web oficial
  • “ Validación de formularios en menos de una hora con Vuelidate ”, Sarah Drasner, CSS-Tricks
  • vuex-persistedstate,” Hilo

(ks, ra, il)Explora más en

  • vista
  • Herramientas
  • javascript





Tal vez te puede interesar:

  1. 50 herramientas útiles de JavaScript
  2. 50 nuevas herramientas de JavaScript que mejorarán su flujo de trabajo
  3. Herramientas, bibliotecas y complementos útiles de JavaScript y jQuery
  4. Herramientas útiles de HTML, CSS y JavaScript que hacen prácticamente de todo

Herramientas útiles en el desarrollo web Vue.js

Herramientas útiles en el desarrollo web Vue.js

Índice notificación vue Instalación

programar

es

https://aprendeprogramando.es/static/images/programar-herramientas-utiles-en-el-desarrollo-web-vue-1063-0.jpg

2024-05-21

 

Herramientas útiles en el desarrollo web Vue.js
Herramientas útiles en el desarrollo web Vue.js

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Top 20