Tutorial: Vue.js para principiantes

Si no está familiarizado con Vue.js, esta guía le ayudará a conocer algunos aspectos básicos.

• Pruebe el espacio aislado de código Hola mundo de Vue.js.
• Pruebe a usar Node.js en Visual Studio Code.

Requisitos previos

• Primero debe instalar Vue.js en Windows o en el Subsistema de Windows para Linux.

Prueba de NodeJS con Visual Studio Code

Si aún no lo tiene, instale VS Code. Se recomienda instalar VS Code en Windows, independientemente de si planea usar Vue en Windows o WSL.

1. Abra la línea de comandos, cree un nuevo directorio con mkdir HelloVue y, a continuación, vaya al directorio con: cd HelloVue

2. Instale la CLI de Vue: npm install -g @vue/cli

3. Cree la aplicación de Vue: vue create hello-vue-app

   Tendrá que elegir si quiere usar Vue 2 o la versión preliminar de Vue 3, o seleccionar manualmente las características que quiera.

   

4. Abra el directorio de la nueva aplicación hello-vue-app: cd hello-vue-app

5. Pruebe a ejecutar la nueva aplicación de Vue en el explorador web: npm run serve

   Debería ver "Welcome to your Vue.js App" (Bienvenido a la aplicación de Vue.js) en http://localhost:8080 el explorador. Puede pulsar Ctrl+C para detener el servidor vue-cli-service.

   Nota

   Si usa WSL (con Ubuntu o su distribución de Linux favorita) para este tutorial, deberá asegurarse de que tiene instalada la extensión Remote - WSL para obtener la mejor experiencia de ejecución y edición del código con el servidor remoto de VS.

6. Pruebe a actualizar el mensaje de bienvenida; para ello, abra el código fuente de la aplicación de Vue en VS Code con: code .

7. VS Code se iniciará y mostrará la aplicación de Vue en el Explorador de archivos. Vuelva a ejecutar la aplicación en el terminal con npm run serve y abra el explorador web en localhost para que pueda ver la página de bienvenida de la página de Vue que se muestra. Busque el archivo App.vue en VS Code. Pruebe a cambiar "Welcome to your Vue.js App" (Bienvenido a la aplicación de Vue.js) a "Welcome to the Jungle!" (Bienvenido a la jungla). Verá la "recarga en caliente" de la aplicación de Vue en cuanto guarde el cambio.

   

Recursos adicionales

• Uso de Vue en Visual Studio Code: más información sobre el uso de Vue con VS Code, incluida la extensión Vetur, que proporciona resaltado de la sintaxis de Vue, IntelliSense, compatibilidad con la depuración, etc.

• Documentación de Vue.js

• Comparación de Vue con otros marcos como React o Angular

• Introducción a Vue.js

• Ruta de entrenamiento Primeros pasos con Vue.js