Inicio rápido: Creación de un proyecto de Vue.js

En esta guía de inicio rápido, creará y ejecutará una aplicación web base de interfaz con Vue.js. En este artículo se proporciona una introducción de 5 a 10 minutos al entorno de desarrollo integrado (IDE) de Visual Studio.

Prerrequisitos

Prepare la configuración con los siguientes requisitos previos:

Creación de la aplicación de Vue

Cree una aplicación web Vue.js siguiendo estos pasos:

  1. En la ventana Visual Studio Inicio (seleccioneVentana de inicio>), seleccione Crear un nuevo proyecto.

    Captura de pantalla que muestra cómo seleccionar la opción

    Captura de pantalla que muestra cómo seleccionar la opción

  2. En el cuadro de diálogo Crear un nuevo proyecto , escriba Vue en el cuadro de búsqueda. Seleccione la plantilla Aplicación de Vue para JavaScript o TypeScript y seleccione Siguiente.

    Captura de pantalla que muestra cómo elegir una plantilla de Vue para JavaScript o TypeScript.

    Captura de pantalla que muestra cómo elegir una plantilla de Vue para JavaScript o TypeScript.

    En Visual Studio 2022 versión 11 y posteriores, el nombre de plantilla JavaScript independiente Vue Project se cambia a Vue App.

  3. Escriba un nombre para el proyecto y la solución y seleccione Crear.

Espere a que Visual Studio cree el nuevo proyecto.

Visualización de las propiedades del proyecto

La configuración predeterminada del proyecto le permite compilar y depurar el proyecto.

Si desea cambiar cualquier configuración, siga estos pasos:

  1. Haga clic con el botón derecho en el proyecto en Explorador de soluciones y seleccione Propiedades.

  2. En el panel de propiedades del proyecto, seleccione Depurar, Linting, Compilar o Implementar para ver las propiedades correspondientes.

Para la configuración del depurador, use el archivo launch.json .

Nota

El archivo de configuración del depurador launch.json almacena la configuración de inicio asociada a la acción Iniciar en la barra de herramientas de Depuración. El archivo launch.json debe estar ubicado en la carpeta .vscode de tu proyecto.

Construye tu proyecto

Para compilar el nuevo proyecto, seleccione Compilar>solución de compilación.

Inicio del proyecto

Seleccione F5 o use la acción Iniciar en la parte superior de la ventana.

El proyecto abre un símbolo del sistema con el texto siguiente (o similar):

VITE v4.4.9 ready in 780 ms

Nota

Compruebe la salida de la consola en busca de mensajes, como instrucciones para actualizar su versión de Node.js.

Cuando el proceso se realiza correctamente, se abre la aplicación base Vue.js.

Paso siguiente