Todo lo que necesitas para comenzar con Vue.js

Lo más probable es que, al leer estas líneas, ya haya escuchado sobre el marco de JavaScript llamado Vue . Si iba a probarlo, pero realmente no se imaginaba con qué debería comenzar, entonces este material fue escrito especialmente para usted. Su autor dice que quiere hablar sobre por qué realmente le gusta Vue. Además, presentará a todos 4 formas de escribir la primera aplicación en Vue.

Resumen del material

Por lo general, trato de no hablar de muchas maneras de resolver los mismos problemas para aquellos que recién comienzan a aprender un determinado marco. Pero en este caso, creo que mostrar algunas formas de desarrollar la primera aplicación Vue es muy importante. Quizás le guste trabajar con la línea de comandos, o quizás con herramientas equipadas con una interfaz gráfica. Ambos son adecuados para el desarrollo de Vue. Además, las aplicaciones Vue se pueden escribir sin recurrir a la línea de comando. Para hacer esto, simplemente agregue una etiqueta a la página HTML para cargar el script correspondiente. Y, por último, es posible que no desee preocuparse por configurar su entorno de desarrollo. En cambio, te esfuerzas por probar Vue lo antes posible, sin movimientos innecesarios. De hecho, no importa qué estrategia sigas, aquí encontrarás algo que te ayudará a comenzar con Vue.

En el proceso de leer este material, encontrará enlaces a recursos útiles. Y cuando leas este artículo completo, te diré a qué debes prestar atención para seguir estudiando Vue. Cabe señalar que aquí no nos sumergiremos en las complejidades de Vue, no consideraremos todos los mecanismos posibles de este marco. Vamos a ocuparnos de lo básico y llegar a la primera aplicación de trabajo.

Primero, hablemos sobre algunas características interesantes de Vue.

Vue Fortalezas

La fuerza de Vue, en mi opinión, es lo amigable que es este marco para los novatos. El equipo de desarrollo de Vue ha hecho un trabajo maravilloso, tratando de garantizar que los desarrolladores de diversas calificaciones puedan comenzar a trabajar rápidamente de manera productiva con el marco. Si conoce HTML, CSS y JavaScript, esto significa que está literalmente a un paso de desarrollar aplicaciones bastante potentes en Vue.

También creo que Vue, entre las tres principales herramientas de desarrollo front-end (Angular, React y Vue), tiene las barreras de entrada más bajas. Esto es cierto por varias razones, pero para mí se trata de tres características principales de Vue:

• Gran documentación
• Maravillosa comunidad.
• Este es un marco progresivo.

▍ Documentación

Si habla con desarrolladores a los que les gusta Vue, entonces creo que muchos de ellos hablarán sobre la calidad de la documentación para este marco. Si visita Vue.js, puede encontrar que la documentación se divide en varias secciones:

• Liderazgo Aquí puede encontrar todo lo que necesita para comenzar a usar Vue.js. Esta sección está dividida en subsecciones fáciles de entender que presentan al lector los conceptos necesarios para comenzar a desarrollar aplicaciones basadas en componentes.
• API Esta sección proporciona una descripción detallada de la API de Vue. Por ejemplo, si alguna vez encuentras algún método del que no estás muy seguro, la visita a esta sección te ayudará a aclarar la situación.
• Recomendaciones Aquí puede encontrar recomendaciones maravillosas, siguiendo las cuales puede evitar la aparición de errores. Estas recomendaciones pueden advertir al desarrollador contra el uso de antipatrones. Lo importante es que es más probable que no sean reglas estrictas, sino algo así como una guía. Después de que se sienta cómodo con Vue, escriba algunas aplicaciones, le recomendaría que lea los materiales en esta sección. Creo que esta es una fuente muy valiosa de conocimiento sobre Vue.
• Ejemplos . Aquí puede encontrar ejemplos de aplicaciones desarrolladas por Vue. En su lugar, no habría buscado aquí hasta que me haya acostumbrado un poco al desarrollo de componentes. Pero un poco más tarde, cuando esté listo para aprender sobre cómo se organizan las aplicaciones Vue completas, debería estudiar esta sección.
• Libro de recetas Esta sección contiene respuestas a preguntas frecuentes sobre Vue. Por ejemplo, a tales preguntas: “¿Cómo realizar la validación de formularios?”, “¿Cómo realizar pruebas unitarias de un componente?”. Esto, nuevamente, es un recurso valioso, pero el desarrollo de sus materiales debe posponerse hasta el momento en que tenga preguntas similares a las mencionadas anteriormente.
• Herramientas y bibliotecas centrales. Vue tiene excelentes herramientas y bibliotecas principales. No entraremos en detalles especiales sobre esto, ya que debemos comenzar a escribir el código lo antes posible. Daré aquí algunos enlaces a materiales, cuya existencia es útil para conocer. Entonces, entre las herramientas de Vue, me gustaría señalar lo siguiente: herramientas de desarrollador , Vue CLI , Vue Loader . Aquí hay enlaces a materiales en bibliotecas oficiales: Vue Router , Vuex , Vue Server Renderer .

▍ Comunidad

Como programador, me siento involucrado en varias grandes comunidades. Uno de ellos es la comunidad Vue. Sus miembros son amigables, amigables, están más que dispuestos a ayudar a quienes lo necesitan. Recomiendo seguir a los siguientes miembros de la comunidad Vue en Twitter. Por lo tanto, será más fácil para usted comprender lo que están haciendo y descubrir lo que viven. Aquí están los enlaces:

• Evan tu
• Chris fritz
• Sarah drasner
• Damian sulisz
• Divya sasidharan
• Guillaume chau
• Ben hong
• Sebastien chopin
• Natalia Tepluhina
• Edd yerburgh

UeVue es un marco progresivo

Si visita la página de inicio de Vue.js, puede ver que se llama allí: "Marco de JavaScript progresivo". A primera vista, esto puede parecer una táctica de marketing ordinaria, pero al comprender un poco la esencia de Vue, puede comprender que esto no es así. Primero, determinemos el significado de la palabra "progresivo". Es algo que ocurre o se desarrolla gradualmente o en etapas; Es algo que se realiza paso a paso.

Pronto verá que al desarrollar aplicaciones Vue, puede trabajar introduciendo gradualmente las capacidades de este marco en ellas. Por ejemplo, si ya tiene un determinado proyecto, puede equiparlo con soporte Vue sin ningún problema. Puede comenzar cargando el script Vue y escribiendo algunas líneas de código.

Si desea utilizar la CLI de Vue, la herramienta de línea de comandos de Vue, para implementar un nuevo proyecto con las capacidades que necesita, entonces tampoco es un problema. A medida que su aplicación crezca y necesite algunas funciones bastante avanzadas, como enrutamiento o administración de estado, la aplicación no será difícil de equipar con estas características.

Como ya se mencionó, Vue es un marco asequible. Si ya conoce HTML, CSS y JavaScript, significa que está listo para comenzar a usar Vue. De hecho, si realmente desea comenzar a escribir aplicaciones Vue, le propongo hacerlo.

Opción # 1: secuencia de comandos Vue conectada a la página

La primera forma de usar Vue que estamos explorando es conectar un script Vue a la página usando la <script> . Si ya ha trabajado con JavaScript, no habrá nada nuevo para usted. Es decir, estamos hablando del hecho de que hay una página HTML que necesita ser equipada con alguna funcionalidad implementada en alguna biblioteca JS. Para esto, la biblioteca está conectada a la página usando la <script> . Cabe señalar que el método de uso de Vue considerado aquí no solo es adecuado para desarrollar una aplicación de capacitación. Encuentra aplicación en proyectos reales.

Por lo general, es bastante difícil introducir nuevas herramientas, bibliotecas o marcos en proyectos reales, por ejemplo, en la organización donde trabaja el programador. Por ejemplo, realmente disfrutas trabajar con Vue. Acude a las autoridades y pregunta si puede reescribir todo el proyecto a Vue. En respuesta a esa pregunta, casi ninguna opción será rechazada de inmediato. Si ofrece utilizar Vue en una página determinada, cuyo desarrollo actualmente está participando, entonces tal oferta puede ser aceptada.

En el siguiente ejemplo, desarrollaremos una aplicación muy primitiva, lo cual es bueno porque será muy conveniente considerar algunos conceptos de Vue en él.

▍ "¡Hola, Vue!"

En esta aplicación vamos a mostrar el texto "¡Hola, Vue!", Y debajo del texto, la hora y fecha actuales. Luego, escribiremos un código que mantenga actualizada la fecha y la hora. Como resultado, el usuario de la aplicación podrá usarlo como un reloj regular, observando el paso del tiempo. Cree una nueva carpeta, cree un archivo index.html en ella y agregue el siguiente código a este archivo:

 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>Hello, Vue.js</title> </head> <body> </body> </html> 

Ahora tenemos el marco de página, la base de la aplicación futura. Por lo tanto, nuestro próximo paso será conectar el script Vue.js. a esta página. Agregue al código de la página, justo encima de la </body> cierre </body> , lo siguiente:

 <!--             --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> </script> 

Presta atención al comentario. Señala una cosa importante. Es decir, ahora hemos conectado la versión de Vue destinada al desarrollo de la página. Si una página determinada está destinada a un uso real, entonces debe conectarle la versión de producción del script. Los detalles sobre esto se pueden encontrar aquí .

Ahora, después de conectar el script, en primer lugar, debemos agregar el elemento raíz a la página a la que se conectará la instancia de Vue:

 <div id="app"> </div> 

Después de eso, cree una nueva instancia de Vue y hágale saber a qué elemento raíz necesita conectarse:

 <script>  const app = new Vue({    el: '#app'  }) </script> 

Ahora crea un par de variables. Almacenarán los valores que usamos para mostrar información en la página. Esto se hace declarando las propiedades del objeto de data :

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello, Vue!',      now: new Date()     }) </script> 

Ahora que los datos están listos, estamos listos para recurrir a la capacidad de Vue para mostrarlos en la página. Esto se hace usando construcciones simples y fáciles de leer:

 <div id="app">  <h1>{{ message }}</h1>  <p>{{ now }}</p> </div> 

Ahora puede felicitarse por haber creado su primera aplicación Vue.js. Si abre index.html en un navegador, debería mostrar una página en la que "Hola, Vue!" Está escrito en letras grandes. Debajo de esta inscripción debe haber una línea que muestra la fecha y hora actuales. Durante el desarrollo e investigación de mi versión del ejemplo, utilicé Visual Studio Code y la extensión Live Server .

Lo que hemos hecho aquí no parece un proyecto particularmente avanzado. Pero en las entrañas de Vue, están sucediendo muchas cosas que permiten que este proyecto funcione de la manera que necesitamos. El marco estableció la conexión entre el DOM y los datos, después de lo cual la aplicación se volvió reactiva. ¿Cómo verificamos esto? Muy simple: simplemente abra la consola JS (directamente en la página de la aplicación) y escriba algo en app.message . Esto debería conducir a un cambio en la etiqueta que se muestra en la página. A continuación se muestra cómo se vería.


Investigación de aplicaciones

Vue también ofrece a los desarrolladores la capacidad de crear controladores para los eventos del ciclo de vida de los componentes. Esto significa que podemos escuchar eventos como created , mounted y destroyed . Cuando ocurre un evento, puede organizar la ejecución de algún código. No entraré en detalles, ya que el objetivo principal de este material es demostrar varios métodos para crear aplicaciones Vue y no desarmar todas las complejidades del marco. Sin embargo, ahora seguimos viendo cómo se ve el procesamiento de los eventos del ciclo de vida de los componentes y terminaremos el trabajo en nuestra primera aplicación.

Gracias al siguiente código, el valor de la variable now se actualizará cada segundo. Al montar Vue, usamos setInterval para configurar una llamada de función cada segundo para actualizar la fecha y la hora. Puede crear controladores de eventos de ciclo de vida agregando los métodos apropiados al objeto de methods . Esto es muy similar a cómo trabajamos con el objeto de data . Aquí está el código:

 <script>  const app = new Vue({    el: '#app',    data: {      message: 'Hello Vue!',      now: new Date()    },    methods: {      updateDate() {        this.now = new Date();      }    },    mounted() {      setInterval(() => {        this.updateDate();      }, 1000);    }  }) </script> 

Si abre esta página en un navegador, su apariencia no cambiará, pero la hora que se muestra en ella se actualizará cada segundo. En este caso, no necesitamos actualizar el DOM manualmente. Vue datos vinculados al DOM. Cuando los datos cambian, lo que se muestra en la página también cambia.

Opción # 2: Vue CLI

Aunque creamos la aplicación simplemente conectando el script Vue a la página, este enfoque no es muy escalable. Si necesita desarrollar una aplicación de página única completa (Aplicación de página única, SPA) y, al mismo tiempo, desea utilizar las herramientas auxiliares de Vue, lo mejor es recurrir a la CLI de Vue.

Si eres de los que realmente no les gusta trabajar en la línea de comandos, entonces puedes usar una herramienta con características similares que tiene una interfaz gráfica (Vue UI).

▍Instalación de Vue CLI

Primero necesitamos instalar la Vue CLI. Antes de hacer esto, necesita obtener Node.js y npm. Si no ha trabajado antes con Node.js y npm, tómese un tiempo para conocerlos y comprenderlos un poco. Aquí está el comando con el que instalar la CLI de Vue:

 npm install -g @vue/cli 

Para crear una nueva aplicación, puede usar el comando vue create . Puede encontrar la lista de comandos que admite vue utilizando el comando vue -h .


Lista de comandos admitidos por vue

El comando create acepta el nombre de la aplicación. Cree una nueva aplicación Vue ejecutando el siguiente comando:

 vue create hello-vue 

Durante este comando, se creará una nueva carpeta hello-vue en el directorio actual. Una descripción detallada del proceso de creación de una aplicación usando vue create digna de un artículo separado.

Por ahora, es suficiente para que estemos de acuerdo con la configuración predeterminada. Esto conducirá a la creación de una nueva aplicación.


Crear una nueva aplicación con Vue CLI

Ahora vaya a la carpeta hello-vue , abra el archivo ubicado en src/components/HelloWorld.vue y reemplace todo su contenido con el siguiente código:

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script> 

Tenga en cuenta que el valor del texto que aparece en msg se establece en el src/App.vue .

Ahora, en la línea de comando o en la terminal integrada en su editor, ejecute el siguiente comando:

 npm run serve 

Iniciará el servidor, después de lo cual proporcionará información sobre cómo abrir la página de inicio de la aplicación. A saber, esto es http: // localhost: 8080 / .


Aplicación Vue en navegador

Aquí examinamos el uso de Vue CLI solo muy superficialmente. Sin embargo, espero que este ejemplo le muestre lo fácil que es usar Vue CLI para crear nuevas aplicaciones que cuentan con una infraestructura confiable y pueden escalar de acuerdo con las crecientes necesidades de un proyecto en desarrollo.

Opción # 3: Vue UI

Junto con Vue CLI, con la herramienta de línea de comandos, también se instala la herramienta Vue UI. Para iniciarlo, use el siguiente comando:

 vue ui 

Durante su ejecución, se abrirá la página de la nueva aplicación, ubicada en http: // localhost: 8000 / dashboard .


Vue UI Page

Con Vue UI, puede crear un nuevo proyecto que tendrá las mismas capacidades que un proyecto creado con herramientas de línea de comandos.


Crear un nuevo proyecto en Vue UI

Una vez completada la configuración del proyecto, puede iniciarla directamente desde la interfaz de usuario de Vue yendo a la sección Project tasks del Project tasks y haciendo clic en el botón correspondiente.


Ejecutar una aplicación en Vue UI

Opción # 4: CodeSandbox

Aunque las opciones anteriores para crear la primera aplicación Vue nos permitieron alcanzar nuestro objetivo, requieren una configuración del entorno de desarrollo. Quizás esto no le convenga y aún no ha creado su primera aplicación Vue. Si es así, ahora veremos otra forma de trabajar con Vue. Consiste en utilizar entornos de desarrollo en línea, uno de los cuales es CodeSandbox .

Antes de crear proyectos en CodeSandbox, deberá registrarse en el sitio o iniciar sesión con una cuenta de GitHub. Después de eso, debe crear una nueva "caja de arena" (en el marco del proyecto se llama "caja de arena") y encontrar Vue entre las plantillas disponibles (en la pestaña Client templates Popular templates o Client templates ).


Crear un nuevo proyecto basado en Vue en CodeSandbox

Después de eso, una nueva aplicación Vue estará a su disposición. En la siguiente figura, puede ver que en el panel izquierdo puede trabajar con archivos de proyecto, en el centro está la ventana del editor y a la derecha está el área de vista previa en la que se muestra la aplicación de trabajo.


Trabajar en la aplicación en CodeSandbox

Abra el archivo src/components/HelloWorld.vue en el editor y reemplace su contenido con el siguiente código:

 <template>  <div class="hello">    <h1>{{ msg }}</h1>    <p>{{ now }}</p>  </div> </template> <script> export default {  name: "HelloWorld",  props: {    msg: String  },  data() {    return {      now: new Date()    };  },  methods: {    updateDate() {      this.now = new Date();     },  mounted() {    setInterval(() => {      this.updateDate();    }, 1000); }; </script> 

Después de eso, verá la misma aplicación en la que ya trabajamos. Al trabajar en un proyecto, puede ser necesario mostrárselo a alguien. Por ejemplo, para consultar sobre algo. CodeSandbox le permite hacer esto usando un enlace especial .


Trabajar en la aplicación en CodeSandbox

Recursos utiles

Aquí hay enlaces a algunos de mis recursos favoritos de Vue. Le ayudarán a avanzar en el desarrollo de este marco. Por ejemplo, aquí está la página Awesome Vue , visitando la cual puede tener una idea de la escala del ecosistema Vue. Encuentra repositorios Vue aquí. Aquí está el blog oficial del proyecto. Aquí está el sitio de la comunidad de desarrolladores de Vue. Ahí tienes : podcasts de Vue. Aquí están las páginas de varios proyectos basados ​​en Vue: VuePress , Nuxt , Gridsome .

Que sigue

No importa qué marco utilice para desarrollar la interfaz, debe mantener sus habilidades de JavaScript en buen estado. Cuanto más tiempo pueda dedicar a mejorar su conocimiento de JS, mejor. Si conoce bien JavaScript, significa que puede manejar cualquier marco o biblioteca con la que necesite trabajar.

Ya hablé sobre el manual Vue de la documentación oficial. Pero vale la pena mencionar nuevamente. Si fuera un desarrollador novato, trataría de tratar esta guía lo más detenidamente posible, leerla y volver a leerla. Pero al mismo tiempo, no me olvidaría poner en práctica los ejemplos de código que se encuentran allí. No es de extrañar que digan que la repetición es la madre del aprendizaje. La repetición juega un papel importante en el proceso de aprendizaje de nuevas tecnologías, y no puede prescindir de ella.

Cuando trabaje con documentación, debe prestar especial atención a los siguientes conceptos básicos de Vue:

• Los componentes
• Enlace de datos.
• Manejo de eventos.
• Directivas
• Métodos
• Propiedades calculadas
• Componente ciclo de vida.
• Propiedades pasadas a los componentes.

No se esfuerce por crear aplicaciones grandes por ahora. Concéntrese en dominar las cosas básicas, y todo lo demás llegará con el tiempo.

Resumen

Si sigues mis publicaciones en Twitter, entonces sabrás que soy un gran admirador de Vue. Me gusta construir aplicaciones basadas en componentes. Creo que usar Vue no solo simplifica el trabajo, sino que también hace que el proceso de escribir código sea una experiencia agradable y emocionante.

Estimados lectores! Si tuvo que estudiar recientemente su primer marco de clientes, díganos cómo fue.