Tutorial: Vue.js para principiantes

Si eres completamente nuevo en el uso de Vue.js, esta guía te ayudará a comenzar con algunos aspectos básicos.

• Pruebe la Vue.js de espacio aislado de código HelloWorld de
• Pruebe a usar Node.js en Visual Studio Code

Prerrequisitos

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

Pruebe 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 y cree un nuevo directorio: mkdir HelloVuey escriba el directorio : cd HelloVue

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

3. Crea tu aplicación Vue: vue create hello-vue-app

   Tendrás que elegir si quieres usar Vue 2 o Vue 3 Preview o seleccionar manualmente las características que quieras.

   preestablecido de la CLI de Vue

4. Abra el directorio del nuevo 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 "Bienvenido a tu aplicación Vue.js" en http://localhost:8080 en el navegador. Puede presionar 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 la mejor experiencia en ejecución y edición del código con el servidor remoto de VS.

6. Pruebe a actualizar el mensaje de bienvenida abriendo el código fuente de la aplicación de Vue en VS Code, escriba: code .

7. VS Code se iniciará y mostrará tu aplicación Vue en el Explorador de archivos. Vuelva a ejecutar la aplicación en el terminal con npm run serve y mantenga abierto el navegador web en localhost para que pueda visualizar la página de bienvenida de Vue. Busque el App.vue archivo en VS Code. Pruebe a cambiar "Bienvenido a la aplicación de Vue.js" a "Bienvenido a la selva". Verá su aplicación de Vue "hot reload" en cuanto guarde los cambios.

   

Recursos adicionales

• Uso de Vue en Visual Studio Code: Obtenga más información sobre cómo usar Vue con VS Code, incluida la extensión Vetur, que proporciona resaltado de sintaxis para Vue, IntelliSense, compatibilidad con la depuración, y mucho más.

• Vue.js documentos

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

• Información general de Vue.js

• Empieza tus primeros pasos con Vue.js camino de aprendizaje