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.
Abra la línea de comandos, cree un nuevo directorio con
mkdir HelloVue
y, a continuación, vaya al directorio con:cd HelloVue
Instale la CLI de Vue:
npm install -g @vue/cli
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.
Abra el directorio de la nueva aplicación hello-vue-app:
cd hello-vue-app
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.
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 .
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 archivoApp.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.
Ruta de entrenamiento Primeros pasos con Vue.js