Creación de Aplicaciones con Dios CLI y su Configuración Básica

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:28

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Curso Básico de Vue.js 2

Clase 24 de 38

Clase 24 / 38

Recursos

¿Qué es Vue CLI y cómo puede acelerar tu desarrollo?

Vue CLI es una herramienta poderosa diseñada para facilitar el desarrollo de aplicaciones, proporcionando un método eficiente y sencillo para configurar un proyecto. Su premisa principal es minimizar el tiempo y esfuerzo necesario para configurar un entorno de trabajo, permitiendo a los desarrolladores enfocarse en el código en lugar de en la configuración inicial.

¿Cómo instalar Vue CLI?

La instalación de Vue CLI es bastante directa. Sigue estos pasos para instalarlo globalmente en tu computadora:

npm install -g @vue/cli

Este comando instalará Vue CLI globalmente, permitiéndote acceder a sus funcionalidades desde cualquier directorio.

¿Cómo crear un proyecto con Vue CLI?

Una vez que Vue CLI está instalado, puedes generar un nuevo proyecto utilizando el comando vue create. Es importante decidir en qué ubicación deseas situar tu proyecto antes de generar la aplicación. Aquí te mostramos cómo hacerlo:

Abre la terminal y navega hasta el directorio donde quieres crear tu proyecto.
Usa el siguiente comando para crear tu proyecto, sustituyendo nombre-proyecto por el nombre deseado para tu aplicación:

vue create nombre-proyecto

El CLI te guiará a través de una serie de preguntas para personalizar la configuración, como incluir Babel o configuraciones de ESLint, entre otras.

¿Qué configuraciones puedes personalizar al crear un proyecto?

Vue CLI te da la opción de elegir diferentes configuraciones al momento de crear un proyecto, asegurando que obtengas exactamente lo que necesitas. Algunas de estas configuraciones incluyen:

Soporte para Babel: Permite utilizar las últimas características de JavaScript, asegurando una amplia compatibilidad.
ESLint: Para asegurar que sigas las mejores prácticas de codificación y ayudar a encontrar y corregir errores en el código.
Prefijos de CSS: Vue CLI puede manejar automáticamente diferentes compatibilidades entre navegadores con preprocesadores CSS.
Configuración de archivos: Decide si almacenas configuraciones en archivos dedicados o dentro de package.json.

¿Cómo ejecutar la aplicación localmente?

Después de crear tu proyecto con las configuraciones deseadas, puedes ejecutarlo localmente con facilidad. Usa los siguientes comandos:

Navega al directorio de tu proyecto:

cd nombre-proyecto

Inicia el servidor de desarrollo:

npm run serve

Esto pondrá en marcha tu aplicación, que podrás ver en el navegador visitando http://localhost:8080.

Explorando la estructura de un proyecto Vue

Al crear un proyecto, Vue CLI organiza automáticamente la estructura de carpetas y archivos. Algunos de los elementos clave incluyen:

src: Contiene el código fuente de la aplicación, incluyendo componentes de Vue y scripts JavaScript principales.
public/index.html: El archivo HTML principal donde se inyectará la aplicación.
babel.config.js: Archivo de configuración para Babel.
eslint.config.js: Contiene las reglas y configuraciones para ESLint.
package.json: Incluye las dependencias del proyecto y scripts de comandos para compilar y servir la aplicación.

Próximos pasos

Ahora que tienes una idea clara de cómo Vue CLI acelera y facilita el proceso de desarrollo, estás listo para profundizar más en los archivos generados y comprender cómo puedes personalizar aún más tu aplicación. En las siguientes lecciones, exploraremos en detalle la estructura generada y cómo trabajar con los componentes de Vue. ¡Continúa aprendiendo y mejora tus habilidades de desarrollo al máximo!