Crear un proyecto en Vue puede parecer desafiante a primera vista, pero con las herramientas adecuadas y una guía clara, resulta ser un proceso muy sencillo. Para arrancar con un proyecto en Vue, necesitas tener instalados en tu computadora Node.js, un terminal de comandos y un editor de código que te acomode, como Visual Studio Code. Además, es fundamental que poseas conocimientos básicos en HTML, CSS y JavaScript.
A continuación, te muestro paso a paso cómo lograrlo:
¿Qué comando usas para crear el proyecto?
Para iniciar el proyecto de Vue, utiliza el comando create-vue. Este se ejecuta a través de npm y se recomienda ejecutarlo con la etiqueta @latest para asegurar que estás usando la versión más actualizada de Vue.
npm create vue@latest
Este comando iniciará un asistente que te hará algunas preguntas. Asegúrate de responder de la siguiente manera para este ejemplo:
Nombre del proyecto: Vue counter game
TypeScript: No
JSX Support: No
Vue Router: No
Pinia (estado global): No
Vitest para Unit Testing: No
End to End Testing: No
ESLint para calidad de código: Sí
Prettier para formateo de código: Sí
¿Cómo gestionar las dependencias?
Una vez completado el asistente, el siguiente paso es instalar todas las dependencias necesarias para tu proyecto. Esto puede tomar unos minutos. Dirígete a la carpeta de tu proyecto (en este caso Vue counter game) y ejecuta:
npminstall
Este comando instalará todos los paquetes necesarios definidos en el archivo package.json del proyecto, permitiendo que tu aplicación funcione correctamente.
Explorando el proyecto inicial
Al abrir el proyecto en Visual Studio Code, te encontrarás con varias carpetas y archivos esenciales que forman la base de cualquier aplicación de Vue.
¿Qué contiene la carpeta 'src'?
La carpeta 'src' es donde se ubica todo el código fuente de tu aplicación. Aquí encontrarás los siguientes archivos clave:
App.vue: Contiene el componente principal de la aplicación. Aquí podrás ver cómo Vue organiza el HTML, JavaScript y CSS dentro de un solo archivo.
main.js: Es el punto de entrada de la aplicación. Este archivo importa los estilos y el componente App, y arranca la aplicación Vue.
¿Cómo configurar el entorno de desarrollo?
Para ejecutar y visualizar tu aplicación, ve a tu terminal y ejecuta:
npm run dev
Este comando lanza un servidor de desarrollo y podrás acceder a tu aplicación en el navegador web en el puerto que se te indique (generalmente es el 5173).
¿Qué archivos se utilizan en la construcción con Vite?
Vite es un moderno constructor de proyectos que Vue utiliza internamente. Su configuración se encuentra en el archivo vite.config.js. Este archivo define cómo se debe comportar el servidor de desarrollo y cómo se debe construir la aplicación para producción.
Trabajando dentro del proyecto
Con el proyecto inicial configurado, estás listo para empezar a modificar la aplicación conforme a tus necesidades. Aquí algunos consejos y recursos fundamentales:
¿Qué es el folder público?
En el folder 'public', coloca archivos como imágenes y íconos que necesitarás en tu aplicación. Al momento de compilarse para producción, estos archivos estarán disponibles en el mismo directorio de distribución.
¿Cómo personalizar la configuración?
Si deseas cambiar cómo se muestran las configuraciones en VS Code, accede a los settings del editor. Allí podrás ajustar la forma en que se visualizan las configuraciones de ESLint y Prettier, conforme a tus preferencias.
Avanzar en Vue te ofrecerá no solo la habilidad para crear aplicaciones web eficientes, sino que también te permitirá experimentar con sus herramientas modernas y entender la filosofía detrás del desarrollo web modular. ¡Sigue explorando, aprendiendo y corriendo aplicaciones cada vez más sofisticadas!
I am the first student to write a comment! Haha! I’m so happy to be in this course.
Solo un aportes, cuando ejecute el comando npm run dev me dio un error, por si les aparece eso se resueelve con este comando: npm install vite --save-dev, el error se debe a que no esta instalado vite en el proyecto o porque no esta disponible en el PATH de nuestro sistema.
Para crear un proyecto en Vue.js desde la terminal, sigue estos pasos:
Asegúrate de tener Node.js instalado.
Ejecuta el comando para crear un nuevo proyecto de Vue:
npm create vue@latest my-vue-project
Reemplaza "my-vue-project" con el nombre que desees.
Responde a las preguntas que se te presenten:
Nombre del proyecto.
Si deseas usar TypeScript (generalmente seleccionas "No" si usas JavaScript).
Si deseas usar Vue Router y Pinia (generalmente seleccionas "No" para un proyecto sencillo).
Si deseas agregar ESLint y Prettier (se recomienda "Sí").
Navega a la carpeta del proyecto:
cd my-vue-project
Instala las dependencias:
npm install
Ejecuta tu aplicación:
npm run dev
Esto iniciará tu aplicación Vue, lista para ser utilizada en el navegador.
Wooou me habían hablado muy bien de vue y me parece que el aspecto visual que puede alcanzar es muy alto además las herramientas de desarrollador están muy interesantes.
Al iniciar un proyecto en Vue, el error sobre la ejecución de scripts deshabilitada generalmente se debe a la configuración de seguridad de tu sistema. Si estás en Windows, es posible que necesites cambiar la política de ejecución de PowerShell. Puedes hacerlo abriendo PowerShell como administrador y ejecutando el siguiente comando:
Set-ExecutionPolicy RemoteSigned
Esto permitirá la ejecución de scripts que estén firmados digitalmente. Asegúrate de reiniciar tu terminal y volver a intentar ejecutar el proyecto.
Buenas!
A mi me salio ese error de powersheell.
Lo resolvi buscando en internet como hacerlo, dejo los pasos aqui:
To resolve this issue and allow npm commands to run, you need to adjust the PowerShell execution policy.
Steps to resolve the error:
Open PowerShell as Administrator:
Search for "PowerShell" in the Windows Start menu.
Right-click on "Windows PowerShell" and select "Run as administrator."
Check the current Execution Policy (Optional but recommended):
Código
Get-ExecutionPolicy
This command will display the current execution policy. Set the Execution Policy to RemoteSigned.
Código
Set-ExecutionPolicy RemoteSigned
When prompted to confirm the change, type A (for Yes to All) and press Enter.
RemoteSigned allows local scripts to run and requires scripts downloaded from the internet to be digitally signed by a trusted publisher. This provides a balance between security and functionality.
Verify the new Execution Policy (Optional).
Código
Get-ExecutionPolicy
It should now display RemoteSigned. Run your npm command.
You can now close and reopen your terminal or command prompt (if it's not PowerShell) and attempt to run your npm command (e.g., npm install) again. The error should no longer appear.
Al ejecutar npm run dev me salio el siguiente error
ENOSPC: System limit for number of file watchers reached
Investigando un poco encontré que esto significa que tu sistema (generalmente Linux) alcanzó el límite de archivos que puede vigilar en tiempo real (watchers). Esto es común con herramientas como Vite, Webpack, etc., que usan hot reload y monitorizan muchos archivos.
Solución: ejecutar el siguiente comando en consola para aumentar el limite
echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Gran Clase, me gusta mucho Vue.
Hola, si les sale éste error
TypeError: crypto.hash is not a function
Solución:
Deben bajar la versión de vite en su package.json a una versión estable y compatible, a mi me funcionó
