Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.
Regístrate o inicia sesión para continuar aprendiendo:
Empecemos a crear nuestro proyecto de Vue.js 3 con todo lo necesario: Typescript, ESLint, Vue Router, Pinia, etcétera.
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.
Vamos a desplazarnos y trabajar de manera local en nuestra computadora, en vez de hacerlo en el Playground, para tener mayor control sobre nuestras carpetas.
Para empezar a usar Vue de manera local, hay un prerrequisito importante: instalar Node.js.
Para instalarlo, accede a la página oficial: Node.js y selecciona tu sistema operativo, ya sea Windows, Linux o MacOS.
Selecciona la opción de descarga que necesites según tu sistema operativo.
Para comprobar si Node.js está instalado, ejecuta el siguiente comando:
node -v
Este comando imprimirá la versión instalada.
Si hay versiones más recientes cuando veas este video, asegúrate de cumplir con el prerrequisito según la documentación de Vue.
Una vez instalado Node.js, ya podrás usar el comando npm
.
Si escribes npm
, verás todas las opciones disponibles, como:
npm install
npm run
NPM significa Node Package Manager, un gestor de paquetes para Node y JavaScript.
Para iniciar un nuevo proyecto de Vue, ejecuta el siguiente comando:
npm init vue@latest
Durante la configuración, el sistema te hará algunas preguntas:
Yes
vue-3-ecommerce
Sí
, para aprender sobre TypeScript.Sí
, para usarlo en nuestros templates.Sí
, para crear una Single Page Application (SPA).Sí
, Pinia es la alternativa moderna a Vuex.No
.No
.Sí
, para mejorar la calidad del código.No
.Una vez confirmadas las opciones, se guardarán las preferencias.
Ejecuta los siguientes comandos:
cd vue-3-ecommerce
npm install
Este proceso instalará las dependencias necesarias.
Puede tardar un poco, así que mientras tanto, podemos configurar nuestro editor de texto.
Esta lección no cuenta con recursos adicionales.
Si crees que hace falta algo, o necesitas ayuda, puedes publicar una pregunta en el foro.
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.
¿Tienes dudas?
Publicar preguntaRegístrate
Inicia sesión para llevar un control de tu progreso.
Capítulos
Estás viendo un capítulo de la serie Aprende Vue 3, Vite, VueRouter, Vuetify, Pinia y TypeScript
Espera un momento 🎁 ...
¿Te gustaría aprender a programar, gratis?
Sólo debes registrarte 😉.