Inicio rápido: Uso de Visual Studio para crear la primera aplicación Vue.js

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

Requisitos previos

• Debe tener instalado Visual Studio y la carga de trabajo de desarrollo de Node.js.

  Si todavía no ha instalado Visual Studio 2019, vaya a la página Descargas de Visual Studio para instalarlo de forma gratuita.

  Si tiene que instalar la carga de trabajo pero ya tiene Visual Studio, vaya a Herramientas>Obtener herramientas y características… y se abrirá el Instalador de Visual Studio. Elija la carga de trabajo Desarrollo de Node.js y, después, haga clic en Modificar.

  

• Debe tener instalado el runtime de Node.js.

  Si no lo tiene instalado, se recomienda instalar la versión de LTS desde el sitio web de Node.js para ofrecer una mejor compatibilidad con los marcos y las bibliotecas externos. Node.js se ha compilado para arquitecturas de 32 y 64 bits. Las herramientas de Node.js en Visual Studio, incluidas en la carga de trabajo de Node.js, admiten ambas versiones. Solo se requiere una y el instalador de Node.js solo admite que se instale una a la vez.

  En general, Visual Studio detecta automáticamente el entorno de ejecución de Node.js instalado. Si no detecta un entorno de ejecución instalado, puede configurar el proyecto para que haga referencia al entorno de ejecución instalado en la página de propiedades (después de crear un proyecto, haga clic con el botón derecho en el nodo del proyecto, elija Propiedades y establezca la ruta de acceso de Node.exe). Puede usar una instalación global de Node.js o puede especificar la ruta de acceso a un intérprete local en cada uno de los proyectos de Node.js.

Crear un proyecto

En primer lugar se crea un proyecto de aplicación web Vue.js.

1. Si todavía no tiene instalado el entorno de ejecución de Node.js, instale la versión LTS desde el sitio web de Node.js.

   Para más información, consulte la sección de requisitos previos.

2. Abra Visual Studio.

3. Cree un nuevo proyecto.

   Presione Esc para cerrar la ventana de inicio. Presione Ctrl + Q para abrir el cuadro de búsqueda, escriba Vue.js básico, elija Aplicación web de Vue.js básico (JavaScript o TypeScript). En el cuadro de diálogo que se muestra, escriba el nombre basic-vuejs y después elija Crear.

   

   Si no ve la plantilla de proyecto Aplicación web de Vue.js básico, debe agregar la carga de trabajo Desarrollo de Node.js. Para instrucciones detalladas, consulte los Requisitos previos.

   Visual Studio crea el nuevo proyecto. El nuevo proyecto se abre en el Explorador de soluciones (panel derecho).

4. Compruebe el progreso de la instalación de los paquetes de npm necesarios para la aplicación en la ventana Resultados (panel inferior).

5. En el Explorador de soluciones, abra el nodo npm y asegúrese de que todos los paquetes de npm que aparecen estén instalados.

   Si falta alguno (icono de signo de exclamación), haga clic con el botón derecho en el nodo npm y elija Instalar los paquetes de NPM que faltan.

Explorar el IDE

1. Eche un vistazo al panel de la derecha del Explorador de soluciones.

   

   • El proyecto está resaltado en negrita. Tiene el nombre que le asignó en el cuadro de diálogo Nuevo proyecto. En el disco, este proyecto se representa mediante un archivo .njsproj en la carpeta del proyecto.

   • En el nivel superior se encuentra una solución, que de forma predeterminada tiene el mismo nombre que el proyecto. Una solución, representada por un archivo .sln en el disco, es un contenedor de uno o más proyectos relacionados.

   • El nodo npm muestra todos los paquetes de npm instalados. Puede hacer clic con el botón derecho en el nodo npm para buscar e instalar paquetes npm mediante un cuadro de diálogo.

2. Si quiere instalar paquetes de npm o ejecutar comandos de Node.js desde un símbolo del sistema, haga clic con el botón derecho en el nodo del proyecto y elija Abrir símbolo del sistema aquí.

Agregar un archivo .vue al proyecto

1. En el Explorador de soluciones, haga clic con el botón derecho en cualquier carpeta, como la carpeta src/components, y luego elija Agregar>Nuevo elemento.

   Si no ve todas las plantillas de elemento, seleccione Mostrar todas las plantillas y elija la plantilla de elemento.

2. Seleccione Componente de archivo único de Vue para JavaScript o Componente de archivo único de Vue para TypeScript y luego haga clic en Agregar.

   Visual Studio agrega el nuevo archivo al proyecto.

Compilar el proyecto

1. Luego elija Compilar>Compilar solución para compilar el proyecto.

2. Consulte la ventana Resultados para ver los resultados de la compilación y elija Compilar en la lista Mostrar salida de.

En la plantilla de proyecto Vue.js de JavaScript (y las versiones anteriores de la plantilla de TypeScript) se usa el script build de npm mediante la configuración de un evento posterior a la compilación. Si quiere modificar este valor, abra el archivo de proyecto ( <projectname>.njsproj) desde el Explorador de Windows y busque esta línea de código:

<PostBuildEvent>npm run build</PostBuildEvent>

Ejecutar la aplicación

1. Presione Ctrl+F5 (o seleccione Depurar > Iniciar sin depurar) para ejecutar la aplicación.

   En la consola, se ve un mensaje Iniciando servidor de desarrollo.

   Luego la aplicación se abre en un explorador.

   Si no ve la aplicación en ejecución, actualice la página.

   

2. Cierre el explorador web.

¡Enhorabuena por completar este tutorial de inicio rápido! Esperamos que haya aprendido un poco sobre el uso del IDE de Visual Studio con Vue.js. Si quiere profundizar más en sus funcionalidades, continúe con el tutorial que encontrará en la sección Tutoriales de la tabla de contenido.

Pasos siguientes

Creación de una aplicación Vue.js

Deploy the app to Linux App Service (Implementar la aplicación en App Service de Linux)