Crear nuevo proyecto

Esto está genial, sin embargo, para nuestro proyecto nosotros vamos a tener más de un componente. Aquí podemos agregar más archivos y tener varios componentes también, pero vamos a desplazarnos, vamos a trabajar de manera local en nuestra computadora, en vez de hacerlo en el Playground, para que tengamos mayor control sobre nuestras carpetas. ¿Cómo empezamos a usar Vue de manera local? Hay un prerequisito importante que es instalar Node .js. Tienes que instalar Node .js en tu ordenador. Para instalar Node puedes simplemente acceder a la página oficial que es Node .js .org y seleccionar tu sistema operativo. En el caso de Windows la extensión es MSI, en el caso de MacOS, SPKG y así sucesivamente. Seleccionan la opción que necesites según tu sistema operativo. Recuerda que te puedes instalar, como si te hubiera un error que se te presentes. ¿Cómo sabes si ya tienes Node instalado? Simplemente escribe Node guión V, y esto te debe imprimir la versión de Node que tienes instalada. Por ejemplo, en este caso estoy usando esta versión. Cuando veas este vídeo, probablemente hayan versiones más recientes. Lo importante es cumplir con el prerequisito que se menciona en la documentación de Vue. Una vez que tengas Node instalado, ya vas a poder usar el comando NPM. Si escribimos solo NPM vemos todas las opciones que este comando permite. NPM install, NPM run, NPM significa Node Package Manager. Es un gestor de paquetes para Node y para JavaScript. Lo que vamos a hacer entonces es ejecutar este comando para iniciar un nuevo proyecto de Vue. Copiamos este comando entonces y lo pegamos. Ten en cuenta que este carácter el símbolo de mayor no tiene que ejecutarse, entonces lo vamos a borrar, solo tenemos que ejecutar npm init Vue arroba latest. Aquí nos pregunta, ¿deseas continuar? Ok to proceed? Yes. Ahora sí. Vue JS, the progressive JS framework. Project name, ¿cuál es el nombre de nuestro proyecto? En este caso lo vamos a llamar Vue 3 e-commerce. Nos pregunta si queremos agregar TypeScript o no. El uso de TS es opcional, en este caso sí vamos a usarlo para aprender también qué es TypeScript. Queremos agregar support para JSX, le decimos que sí. Esto es importante para nuestros templates. Queremos agregar Vue Router para que nuestra aplicación sea una Single Page Application. En este caso le decimos que sí, porque nos interesa tener rutas gestionadas por Vue. ¿Queremos usar PINIA para el State Management? PINIA es la nueva alternativa de Vue que reemplaza a Vuex. Si en algún momento escuchas hablar de PINIA o de Vuex, recuerda que esto se usa para gestionar el estado de tu aplicación. En este caso sí vamos a usar PINIA. Más adelante vamos a explicar con mayor detalle cómo usar el Vue Router, qué es PINIA, qué es Vuex, la diferencia entre PINIA y Vuex y otros conceptos adicionales. En este caso no vamos a agregar esta característica de Unit Testing, no vamos a agregar una solución de End To End testing, sí vamos a agregar ESLint. Si vamos a agregar este linter para mejorar la calidad de nuestro código. No vamos a agregar Prettier, y ya está. Ha aguardado nuestras preferencias, ahora nos pide ejecutar estos comandos. Vamos a usar el comando CD para ubicarnos en la carpeta Vue 3 e-commerce. Estando aquí vamos a ejecutar NPM INSTALL para que instale las dependencias necesarias. Esto puede tardar un poco, así que mientras tanto vamos a configurar nuestro editor de texto.

Crea una cuenta y continúa aprendiendo 🚀

Crear nuevo proyecto