Tutorial de Vue.js 3 por ejemplo: instalar / crear la aplicación Vue 3 y la API de composición

 Vue.js 3 es la próxima versión de Vue que fue reescrita desde cero con TypeScript por el equipo de Vue. Aún no se ha lanzado al público para uso de producción, pero la versión beta ya se lanzó.

Vue 3 no está disponible para su uso en producción en este momento, pero aún puede usar la versión beta para conocer las nuevas funciones.

En este tutorial, le mostraremos cómo desarrollar una aplicación simple utilizando la versión beta actual de Vue 3, nos centraremos especialmente en las nuevas funciones.

¿Necesita aprender Vue 2 o Vue 3 en este momento?

Dado que Vue 3 aún no se lanzó, puede comenzar aprendiendo Vue 2. Porque, incluso si se introducirán o actualizarán muchas API nuevas, la mayoría de los conceptos y patrones fundamentales de Vue 2 aún estarán disponibles en Vue 3.

Esto es lo que aprenderá siguiendo este tutorial:

• Instalando Vue 3,
• Creando una nueva aplicación Vue 3
• Trabajando con el estado
• Creando una plantilla
• Trabajar con la API de composición

¿Cómo instalar Vue 3?

Podemos instalar Vue 3 y crear un nuevo proyecto usando dos métodos o más, veamos cómo.

Cree un proyecto de Vue 3 usando GitHub y NPM

Comencemos instalando Vue 3 usando git y npm.

Dirígete a una nueva interfaz de línea de comandos y ejecuta los siguientes comandos:

$ git clone https://github.com/vuejs/vue-next-webpack-preview.git vue3-example
$ cd vue3-example
$ npm install

Después de instalar las dependencias de npm, procedamos eliminando los archivos repetitivos y main.jscreemos un nuevo archivo donde podamos arrancar nuestra aplicación Vue 3:

$ rm -rf src/*
$ touch src/main.js

A continuación, debe ejecutar el servidor de desarrollo de la siguiente manera:

$ npm run dev

Inicialización de una nueva aplicación Vue 3

Con Vue 3, tenemos una nueva forma de iniciar una nueva aplicación Vue. Ahora deberíamos usar el nuevo createAppmétodo en lugar de new Vue().

Abra el nuevo src/main.jsarchivo e invoque el createAppmétodo con un objeto de definición de la siguiente manera:

import { createApp } from "vue";

const app = createApp({});

Asignamos la aplicación Vue a una appvariable.

A continuación, necesitamos llamar al mountmétodo en la appinstancia y proporcionar el selector CSS del elemento DOM donde montaremos nuestra aplicación Vue:

app.mount("#app");

Usando el nuevo createAppmétodo, creamos una nueva instancia de aplicación que no será contaminada por ninguna configuración global (complementos, mixins, propiedades de prototipos, etc.) aplicada a otras instancias. Esto resulta especialmente útil cuando se escriben pruebas unitarias para que cada prueba esté aislada de la otra.

Más información: RFC de cambio de API global .

Cree un proyecto de Vue 3 con Vue CLI y el vue-nextcomplemento

Ahora, veamos una segunda forma que puede usar para crear un proyecto de Vue 3 en este momento usando Vue CLI con el vue-nextcomplemento.

Primero, abra una nueva terminal e instale la última versión de Angular CLI si aún no está instalada en su máquina de desarrollo:

$ npm install --global @vue/cli

En el momento de escribir este tutorial, lo hemos instalado @vue/cli v4.3.1.

A continuación, inicialicemos una nueva aplicación usando la CLI de Vue con los complementos de Babel y ESLint usando el siguiente comando:

$ vue create vue3-example

Se le pedirá:

Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 

Dado que Vue 3 aún no se ha lanzado públicamente, la CLI ha generado un proyecto Vue 2, pero podemos convertirlo en un proyecto Vue 3 agregando el vue-nextcomplemento de la siguiente manera:

$ cd vue3-example
$ vue add vue-next

Ahora, si abre el main.jsarchivo de su aplicación Vue, verá el siguiente código:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Este es el código para inicializar una nueva instancia de Vue 3.

A continuación, podemos iniciar un proyecto de desarrollo de recarga en vivo usando el siguiente comando:

$ npm run serve

Obtener datos de una API

Veamos ahora cómo implementar una funcionalidad básica de nuestra aplicación obteniendo datos de una API REST remota y usando varias características de Vue 3, como la API de estado y composición.