Cómo instalar Vue

Vue es un framework open source de JavaScript utilizado para crear interfaces de usuario. Vue se ocupa únicamente de la capa de presentación, que es lo que los usuarios ven en su navegador cuando ejecutan una aplicación. En este tutorial veremos cómo instalar Vue y cómo inicializar un proyecto con este framework.

Requiremientos

Si quieres, puedes incluir el script de Vue directamente en tu proyecto, pero no es recomendable. Si quieres crear un proyecto con Vue, necesitarás tener Node.js instalado en tu sistema. De este modo podrás usar los gestores de paquetes NPM o Yarn, según prefieras. Para instalar Node.js en tu sistema, consulta el tutorial de instalación de Node.js.

También será necesario que tengas ciertos conocimientos básicos acerca de la terminal de comandos de tu sistema operativo. Obviamente, si vas a usar Vue, tendrás que tener ciertos conocimientos de JavaScript y también de HTML.

Recomendaciones

Para programar con Vue puedes usar cualquier IDE. Lo que sí es recomendable es que uses un plugin de resaltado de sintaxis que te permita formatear el código. A continuación tienes la lista de plugins más usados según el IDE que utilices:

• VS Code: Instala el plugin Vetur.
• Sublime: Instala el plugin Vue Syntax Highlight.
• Atom: Instala el plugin language-vue.
• CodeMix: Instala el plugin Vetur de VS Code.
• WebStorm: Soporte nativo de Vue.

También es recomendable que instales las DevTools de Vue en tu navegador, que son herramientas que te permitirán diagnosticar el código y detectar errores, pudiendo inspeccionar el código de tu aplicación en tiempo de ejecución:

• Google Chrome: Instala el plugin Vue.js devtools para Chrome.
• Mozilla Firefox: Instala el plugin Vue.js devtools para Firefox.
• Microsoft Edge: Por ahora todavía no están disponibles.

Por ahora es recomendable que uses Chrome o Firefox  para inspeccionar el código, ya que las DevTools de Edge todavía están en un estado experimental. Si las DevTools no funcionan correctamente en Chrome, usa esta extensión en lugar de la anterior.

Cómo instalar Vue

Pare crear un proyecto con Vue tendrás que instalar la herramienta de línea de comandos Vue CLI, con la que podrás compilar el código Vue en código JavaScript, entre otras cosas. Para instalar Vue en tu sistema, abre una ventana de terminal de comandos e instálalo con uno de estos dos comandos, dependiendo del gestor de paquetes que utilices:

# Instalación de Vue CLI con NPM
npm i -g @vue/cli @vue/cli-service-global

# Instalación de Vue CLI con Yarn
yarn global add @vue/cli @vue/cli-service-global

Una vez hayas instalado Vue CLI, ya podrás crear un proyecto usando el comando vue create. Por ejemplo, para crear el proyecto proyecto-vue, tendrás que desplazarte hasta el directorio en el que quieres crearlo y usar el siguiente comando:

vue create proyecto-vue

Se te preguntará si prefieres usar Vue 2 con las opciones por defecto, Vue 3 con las opciones por defecto o si por el contrario prefieres escoger los componentes a instalar. Selecciona la opción que prefieras, que seguramente será Vue 3, ya que instalará los componentes por defecto de la última versión de Vue.

También se te dará a escoger entre el gestor de paquetes Yarn o NPM. Puedes usar el que más te guste.

Una vez creada la aplicación, accede al directorio del proyecto usando el comando cd y ejecuta uno de estos comandos para iniciar el servidor local:

# NPM
npm run serve

# Yarn
yarn serve

Luego accede a la URL http://localhost:8080/ o a la que se muestre en la terminal para ver la página por defecto de Vue en tu navegador.

Alternativamente también puedes incluir el script de Vue directamente en la cabecera de tu proyecto, aunque es poco recomendable para proyectos en producción, ya que al compilación de código Vue en JavaScript se realizará al vuelo, con la pérdida de eficiencia que ello conlleva.

Puedes incluir el script de Vue desde una CDN en un archivo HTML, copia y pega el siguiente script en la sección HEAD de la plantilla de tu proyecto:

<script src="https://unpkg.com/vue@3.0.3/dist/vue.global.prod.js"></script>

Se ha incluido la versión 3.0.3 de producción de Vue, pero puedes incluir cualquier otra reemplazando el número de versión en la URL del enlace a la CDN. También puedes usar una versión de desarrollo de Vue. Para ello basta con que elimines el sufijo .prod de la extensión del archivo que usas para incluir Vue:

<script src="https://unpkg.com/vue@3.0.3/dist/vue.global.js"></script>

Y esto ha sido todo.

---