En esta página:
Hace unas semanas fue lanzada la nueva versión de Vue Cli 3, que cuentas con nuevas funciones para agilizar y optimizar el trabajo con Vue JS, potente Framework Javascript para el desarrollo de Vistas Front, vamos a explicarte como instalar Vue Cli 3, los comandos y funciones más destacados, entre otros detalles.
Si es la primera ves escuchas sobre Vue JS te recomendamos leer nuestro artículo Que es Vue JS, Historia y otros detalles para que estés familiarizado con este artículo.
Que es Vue Cli ?
Para los que no conocen sobre Vue Cli, pues es un entorno de comandos y funciones que permite el desarrollo ágil con Vue JS, estos comandos y funciones se integran a una Consola de Comandos como la que viene en Windows o Git Bash, con esto la consola de comandos tendrá soporte para las instrucciones de Vue Cli mientras desarrollas tu proyecto con Vue JS.
Vue Cli esta compuesto por varios paquetes y dependencias, como:
CLI
Es una paquete instalado de manera global que proporciona Vue a las consolas de comandos que están instaladas en el Sistema Operativo de un Computador o PC. CLI da la capacidad de organizar de manera rápida un proyecto por medio del comando vue create, también para levantar un servidor con vue serve, así mismo ayuda a gestionar los proyectos mediante una interfaz gráfica de usuario mediante el comando vue ui y otros comandos.
Servicio CLI
Este servicio es una dependencia para el desarrollo de proyectos con Vue JS, se despliega en cada proyecto que hayas creado con Vue Cli. El Servicio CLI está creado bajo Webpack y Webpack Dev Server que asi mismo cuenta con:
- Un servicio central que inicia otros complementos en CLI.
- Configuraciones internas del paquete web optimizado para todo los proyectos creados con Vue JS.
- El binario vue-cli-service con los comandos serve, build, inspect entre otros.
Complementos CLI (Plugins)
Son un conjunto de paquetes que brindan diferentes funciones para Vue Cli 3, entre estas funciones están las transpilación de Babel / Typescript o la integración para cambiar el estilo del código con ESLint.
Los complementes se suelen usar durante el proceso de creación de un proyecto, se usan para añadir funcionalidades rápidamente evitando el desarrollo lento del proyecto, asimismo estos plugins o complementos pueden ser reutilizables en Vue Cli 3.
Instalación de Vue Cli 3
Para poder instalar la versión 3 de Vue Cli, debes de desinstalar las versiones anteriores que tengas instaladas en tu sistema operativo, para desinstalarlas puedes ejecutar el siguiente comando
Nota: Nosotros hasta la fecha usamos Node JS para el trabajo con Vue JS.
|
1 2 3 |
npm uninstall vue-cli -g |
Asimismo Vue Cli requiere la versión de Node JS 8.9 o superior, la versión recomendable según la documentación oficial de Vue Cli es desde Node JS 8.11 o superior.
Teniendo todo correcto, ahora puedes instalar Vue Cli 3 ejecutando el siguiente comando
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
npm install -g @vue/cli `-- @vue/cli@3.1.3 +-- @vue/cli-shared-utils@3.1.1 | +-- joi@13.7.0 | | +-- hoek@5.0.4 | | +-- isemail@3.2.0 | | | `-- punycode@2.1.1 | | `-- topo@3.0.3 | | `-- hoek@6.0.3 ... ... ... |
Una ves instalado, puedes verificar si tienes la versión 3 de Vue Cli instalado, ejecuta el siguiente comando
|
1 2 3 4 |
vue --version 3.1.3 |
Con eso ya tienes instalado Vue Cli 3 listo para usarlo.
Crear un Proyecto
Con la versión de Vue Cli 3 puedes crear un proyecto de manera más intuitiva, para crear un nuevo proyecto ejecutando el siguiente comando, colocale un nombre a tu proyecto después del comando
|
1 2 3 |
vue create miaplicacion |
El sistema te va pedir que escojas un tipo de ajuste por defecto que incluye Babel y Eslint o configurarlo manualmente
|
1 2 3 4 5 6 |
Vue CLI v3.1.3 ? Please pick a preset: default (babel, eslint) > Manually select features |
Cuando seleccionas la opción Manualmente o Manually select features te aparece las siguientes opciones
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Vue CLI v3.1.3 ? Please pick a preset: Manually select features ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing |
Si no sabes que opción elegir, cierra la consola, vuelve a crear el proyecto y selecciona la opción por default
|
1 2 3 4 5 6 |
Vue CLI v3.1.3 Creating project in ... Initializing git repository... Installing CLI plugins. This might take a while... |
El sistema de Vue Cli 3 crea un conjunto de directorios y archivos para el optimo funcionamiento del proyecto.
Instalación de Plugins para Vue Cli 3
Algo que nos parece genial es poder usar plugins y herramientas que agilizan el desarrollo con Cli 3, en muchas ocasiones puedes necesitar instalar un plugin, para esto puedes usar el comando vue add
Por ejemplo si deseas instalar el plugin EsLINT para dar estilos al código, puedes ejecutar lo siguiente
|
1 2 3 4 5 6 7 |
vue add @vue/eslintvue add @vue/eslint Installing @vue/cli-plugin-eslintvue... ... ... ... |
Los plugins son para Vue Cli 3 y darle la posibilidad de extender y realizar otras tareas, pero no reemplaza a NPM que se utiliza para instalar paquetes al proyecto creado con Vue JS.
Notas
- Los pasos mencionados en este artículo, pueden cambiar en futuras versiones de Vue Cli, esto no depende de nosotros si no de los desarrolladores que dan soporte a Vue Cli.
- En otro artículo expandiremos más el tema sobre Vue Cli 3, en donde hablaremos sobre Vue UI entre otros temas.
Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.