Crear una aplicación de Vue 3

Para crear un proyecto de Vue, se recomienda utilizar NPM, que no es más que un gestor de dependencias Javascript que nos automatizará la tarea de instalar librerías y paquetes en aplicaciones Javascript, de modo que no tengamos que preocuparnos de hacerlo manualmente.

Como novedad en Vue 3 se utilizará un sistema llamado Vite que será el encargado de gestionar el proyecto y permitirnos desarrollar rápidamente. En versiones anteriores de Vue se usaba Webpack, un sistema más antiguo y algo más lento.

Creando un nuevo proyecto

Para crear un nuevo proyecto, solo tenemos que colocarnos en nuestro workspace, es decir, la carpeta donde guardaremos todos nuestros proyectos y escribir el comando npm init vue@latest, seguido del nombre de la carpeta de nuestro proyecto, por ejemplo, vue-folder:

$ npm init vue@latest vue-folder
Need to install the following packages:
  [email protected]
Ok to proceed? (y) _

Como bien nos responde la terminal, esto instalará el paquete create-vue, una especie de asistente que se encargará de crear la estructura de carpetas del proyecto de vue y dejarlo listo para empezar, dependiendo de las características que queramos instalar.

Una vez instalado, nos aparecerá el siguiente asistente:

Vue.js - The Progressive JavaScript Framework

✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in /home/manz/vue3-project...

Done. Now run:

  cd vue-folder
  npm install
  npm run format
  npm run dev

Deberemos responder cada una de estas preguntas para que el asistente instale y preconfigure cada uno de los paquetes para utilizar en nuestro proyecto.

Instalación de Typescript

Vue es un framework basado en el lenguaje de programación Javascript. A pesar de ser un lenguaje muy flexible y potente, algunas de sus características son diferentes a los lenguajes de programación tradicionales y carece de un sistema de tipos, algo que en ciertas situaciones podría ser una desventaja. Typescript es un lenguaje que añade estas características y convierte a Javascript para poder utilizarlo en navegadores.

Podemos instalar Typescript en nuestro proyecto si queremos desarrollar en este lenguaje. Es muy similar a Javascript, pero cambian varias cosas, por lo que no recomiendo instalar Typescript sin aprenderlo bien primero. En el caso de instalarlo, veremos que en nuestro proyecto se instalará el paquete typescript y aparecerán varios ficheros tsconfig.*, entre otras cosas.

Soporte de JSX

JSX es una extensión para Javascript para escribir HTML, originalmente en aplicaciones React. En principio, Vue no necesita soporte para JSX, ni tienes que utilizarlo, pero si eres un programador que proviene de React (o quiere utilizarlo) es posible activando esta opción.

Instalación de Vue Router

Si queremos crear una aplicación con Vue que pueda moverse entre diferentes vistas o páginas, necesitaremos utilizar Vue Router. Recordemos que Vue es lo que se denomina una SPA, es decir, una aplicación de página única, o lo que es lo mismo, no se trata de un sitio web por el que navegas de un HTML a otro, sino que se trata de una sola página HTML que controla todo y carga otros documentos con Javascript.

Instalación de Pinia

Pinia es un gestor de estado para Vue 3. En las aplicaciones Javascript solemos trabajar con datos y muchas veces tenemos que enviar esos datos de un lado a otro de la aplicación, y esto en muchos casos no suele ser fácil. Con Pinia podremos crear almacenes de estado donde podremos gestionar esto de forma cómoda, fiable y rápida.

Inicialmente, en aplicaciones pequeñas o cuando estás aprendiendo, no suele hacer falta. Sin embargo, si vas a hacer una aplicación muy grande, es recomendable utilizar un gestor de estado como Pinia. Antiguamente, se utilizaba Vuex.

Instalación de Vitest

Vitest es un framework que sirve para hacer test unitarios. Se basa en la sintaxis de otros frameworks similares como Jest, pero no está tan acoplado a NodeJS y está preparado para utilizar junto a Vite, que es el sistema que utiliza Vue 3. Los tests unitarios son útiles para comprobar nuestro código y añadir una capa de confianza en que nuestra aplicación no va a fallar en algún momento concreto por algo que no teníamos contemplado.

Instalación de Testing End-to-End

Además de los tests unitarios, también tenemos los tests End-to-end o E2E. Vue nos recomienda utilizar sistemas como Cypress, Nightwatch o Playwright. Al contrario que el anterior, estos sistemas de tests se basan en los denominados «navegadores sin cabeza», una especie de navegador automatizado que puede realizar pruebas automáticas y nos brindan la posibilidad de testear nuestra aplicación como lo haría un navegador.

Instalación de ESLint

ESLint es un linter de código Javascript, que una vez instalado, el editor donde programamos y escribimos código estará preparado para revisar nuestro código en tiempo real y avisarnos de posibles errores, problemas con el código o fragmentos que escribamos mal. Es una herramienta muy útil y altamente recomendada para utilizar. Vue 3 lo instala y configura por defecto, pero aún así, en ESLint: Linter Javascript tienes una guía completa de como configurarlo desde cero.

Instalación de Prettier

Por último, Vue nos permite instalar Prettier, un formateador de código con opinión. Este formateador, una vez instalado en nuestro proyecto, nos «arreglará» el código y lo colocará de la mejor forma posible sin que nosotros tengamos que hacer nada. Se le llama opinionado porque tiene una forma concreta de organizar el código y puede que nos guste o no nos guste su opinión.

Comenzar el proyecto

Una vez hemos decidido que complementos vamos a utilizar y hemos respondido cada una de las preguntas anteriores, el asistente preparará la estructura de carpetas para poder comenzar la instalación de dependencias y comenzar a programar. Para ello, lo primero será acceder a la carpeta creada (el nombre que le dimos al principio):

$ cd vue-folder

Una vez dentro, podremos utilizar npm para realizar acciones que el asistente nos ha dejado preparadas:

En el siguiente artículo veremos detalladamente la estructura de ficheros y carpetas del proyecto creada por el asistente.

Si estás buscando crear o mantener un proyecto Vue 2 (legacy), quizás te interese más echar un vistazo al antiguo asistente @vue/cli. Eso sí, no lo utilices para proyectos Vue 3.