Share via

Creación de una aplicación Vue.js

  • Artículo

En esta introducción de entre cinco y diez minutos al entorno de desarrollo integrado (IDE) de Visual Studio, creará una sencilla aplicación web Vue.js de front-end.

Requisitos previos

Asegúrese de instalar lo siguiente:

Creación de la aplicación

  1. En la ventana de inicio (elija Archivo>Ventana de inicio para abrirla), seleccione Crear un nuevo proyecto.

    Screenshot showing Create a new project

  2. Busque Vue en la barra de búsqueda de la parte superior y, a continuación, seleccione Standalone JavaScript Vue Project (Proyecto de Vue de JavaScript independiente) o Standalone TypeScript Vue Project (Proyecto de Vue de TypeScript independiente), según cuáles sean sus preferencias.

    Screenshot showing choosing a template

  3. Asigne un nombre al proyecto y a la solución y, después, seleccione Siguiente.

  4. Seleccione Crear y espere a que Visual Studio cree el proyecto.

Ver las propiedades del proyecto

La configuración predeterminada del proyecto permite compilarlo y depurarlo. Sin embargo, si necesita cambiar la configuración, haga clic con el botón derecho en el proyecto en Explorador de soluciones, seleccione Propiedades y, a continuación, vaya a la sección Compilación o Depuración.

Nota:

El archivo launch.json almacena la configuración de inicio asociada al botón Iniciar en la barra de herramientas de depuración. Actualmente, launch.json debe encontrarse en la carpeta .vscode.

Compilación del proyecto

Elija Compilar>Compilar solución para compilar el proyecto.

Iniciación del proyecto

Presione F5 o seleccione el botón Iniciar en la parte superior de la ventana. Verá un símbolo del sistema como:

  • VITE v4.4.9 listo en 780 ms

    Nota:

    Compruebe la salida de la consola para ver los mensajes, como un mensaje que le indica que actualice la versión de Node.js.

A continuación, se mostrará la aplicación Vue.js base.

Pasos siguientes

Para la integración de ASP.NET Core:

Creación de una aplicación ASP.NET Core con Vue