Creación de una aplicación de Vue.js mediante Node.js Tools para Visual Studio

Visual Studio admite el desarrollo de aplicaciones con el marco de Vue.js en JavaScript o TypeScript.

Las siguientes características nuevas admiten el desarrollo de aplicaciones Vue.js en Visual Studio:

• Compatibilidad con los bloques Script, Style y Template en archivos .vue
• Reconocimiento del atributo lang en archivos .vue
• Plantillas de proyecto y archivo de Vue.js

Prerrequisitos

• Debe tener instalado Visual Studio 2017 versión 15.8 o una versión posterior y la carga de trabajo de desarrollo Node.js.

  Importante

  En este artículo se requieren características que solo están disponibles a partir de la versión 15.8 de Visual Studio 2017.

  Si aún no está instalada una versión necesaria, instale Visual Studio 2019.

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

• Para crear el proyecto de ASP.NET Core, debe tener instaladas las cargas de trabajo de desarrollo multiplataforma de .NET Core y desarrollo de ASP.NET y web.

• Debe tener instalado el entorno de ejecución de Node.js.

  Si no lo tiene instalado, instale la versión LTS desde el sitio web de Node.js. 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 y elija Propiedades).

Creación de un proyecto de Vue.js mediante Node.js

Puede usar las nuevas plantillas de Vue.js para crear un nuevo proyecto. El uso de la plantilla es la manera más fácil de empezar. Para ver los pasos detallados, consulte Cómo usar Visual Studio para crear su primera aplicación de Vue.js.

Creación de un proyecto de Vue.js con ASP.NET Core y la CLI de Vue

Vue.js proporciona una CLI oficial para aplicar scaffolding a proyectos rápidamente. Si desea usar la CLI para crear la aplicación, siga los pasos descritos en este artículo para configurar el entorno de desarrollo.

Importante

En estos pasos se supone que ya tiene alguna experiencia con el marco de Vue.js. Si no es así, visite Vue.js para obtener más información sobre el marco.

Creación de un nuevo proyecto de ASP.NET Core

En este ejemplo, se usa una aplicación principal de ASP.NET vacía (C#). Sin embargo, puede elegir entre varios proyectos y lenguajes de programación.

Creación de un proyecto vacío

• Abra Visual Studio y cree un proyecto.

  En Visual Studio 2019, elija Crear un nuevo proyecto en la ventana de inicio. Si la ventana de inicio no está abierta, elija Archivo>Ventana de inicio. Escriba aplicación web, elija C# como lenguaje y luego elija ASP.NET Core vacío. Por último, elija Siguiente. En la siguiente pantalla, asigne el nombre client-app al proyecto y luego elija Siguiente.

  Elija la plataforma de destino recomendada o .NET 6 y, después, elija Crear.

  Si no ve la plantilla de proyecto Aplicación web ASP.NET Core, primero debe instalar la carga de trabajo de desarrollo de ASP.NET y web y la carga de trabajo de desarrollo de .NET Core. Para instalar las cargas de trabajo, haga clic en el vínculo Abrir el instalador de Visual Studio en el panel izquierdo del cuadro de diálogo Nuevo proyecto (seleccione Archivo>Nuevo>Proyecto). Se inicia el instalador de Visual Studio. Seleccione las cargas de trabajo necesarias.

Configuración del archivo de inicio del proyecto

• Abra el archivo ./Startup.csy agregue las líneas siguientes al método Configure:

  app.UseDefaultFiles(); // Enables default file mapping on the web root.
  app.UseStaticFiles(); // Marks files on the web root as servable.
  

Instalación de la CLI de Vue

Para instalar el módulo npm vue-cli, abra una terminal de comandos y escriba npm install --g vue-cli o npm install -g @vue/cli para la versión del software 3.0 (actualmente en versión beta).

Crear una estructura para una nueva aplicación cliente usando el Vue CLI

1. Vaya a la terminal de comandos y cambie el directorio actual a la carpeta raíz de su proyecto.

2. Escriba vue init webpack client-app y siga los pasos cuando se le pida que responda a preguntas adicionales.

   Nota

   Para los archivos .vue, debe usar webpack o un entorno similar con un cargador para realizar la conversión. TypeScript y Visual Studio no saben cómo compilar archivos .vue. Lo mismo sucede con la agrupación; TypeScript no sabe cómo convertir módulos ES2015 (es decir, instrucciones import y export) en un único archivo de .js final para cargarlo en el explorador. De nuevo, webpack es la mejor opción aquí. Para impulsar este proceso desde Visual Studio mediante MSBuild, debe empezar desde una plantilla de Visual Studio. En este momento, no hay ninguna plantilla de ASP.NET de fábrica para el desarrollo de Vue.js.

Modificar la configuración de webpack para generar los archivos compilados en wwwroot

• Abra el archivo ./client-app/config/index.jsy cambie los build.index y build.assetsRoot a la ruta de acceso wwwroot:

  // Template for index.html
  index: path.resolve(__dirname, '../../wwwroot/index.html'),
  
  // Paths
  assetsRoot: path.resolve(__dirname, '../../wwwroot'),
  

Indique el proyecto para compilar la aplicación cliente cada vez que se desencadene una compilación.

1. En Visual Studio, vaya a Proyecto>Propiedades>Eventos de compilación.

2. En Línea de comandos del evento anterior a la compilación, escriba npm --prefix ./client-app run build.

Configure los nombres de módulos de salida de webpack

• Abra el archivo ./client-app/build/webpack.base.conf.jsy agregue las siguientes propiedades a la propiedad de salida:

  devtoolModuleFilenameTemplate: '[absolute-resource-path]',
  devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
  

Adición de compatibilidad con TypeScript con la CLI de Vue

Estos pasos requieren vue-cli 3.0, que actualmente está en versión beta.

1. Vaya al símbolo del sistema y cambie el directorio actual a la carpeta raíz del proyecto.

2. Escriba vue create client-appy elija Seleccione manualmente las características.

3. Elija typeScripty, a continuación, seleccione otras opciones deseadas.

4. Siga los pasos restantes y responda a las preguntas.

Configuración de un proyecto de Vue.js para TypeScript

1. Abra el archivo ./client-app/tsconfig.json y agregue noEmit:true a las opciones del compilador.

   Al establecer esta opción, se evita desordenar el proyecto cada vez que se compila en Visual Studio.

2. A continuación, cree un archivo de vue.config.js en ./client-app/ y agregue el código siguiente.

   module.exports = {
       outputDir: '../wwwroot',
   
       configureWebpack: {
           output: {
               devtoolModuleFilenameTemplate: '[absolute-resource-path]',
               devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
           }
       }
   };
   

   El código anterior configura webpack y establece la carpeta wwwroot.

Compilar con vue-cli 3.0

Un problema desconocido con vue-cli 3.0 podría impedir la automatización del proceso de compilación. Cada vez que intente actualizar la carpeta wwwroot, debe ejecutar el comando npm run build en la carpeta client-app.

Como alternativa, puede compilar el proyecto vue-cli 3.0 como un evento anterior a la compilación mediante las propiedades del proyecto ASP.NET. Haga clic con el botón derecho en el proyecto, elija Propiedadese incluya los siguientes comandos en la pestaña Compilar, en el cuadro de texto Línea de comandos del evento anterior a la compilación.

cd ./client-app
npm run build
cd ../

Limitaciones

• lang atributo solo admite lenguajes JavaScript y TypeScript. Los valores aceptados son: js, jsx, ts y tsx.

• lang atributo no funciona con etiquetas de plantilla o estilo.

• La depuración de bloques de script en archivos .vue no se admite debido a su naturaleza procesada previamente.

• TypeScript no reconoce archivos .vue como módulos. Se necesita un archivo que contenga código como el siguiente para indicar a TypeScript el aspecto de los archivos .vue (la plantilla vue-cli 3.0 ya incluye este archivo).

  // ./client-app/vue-shims.d.ts
  declare module "*.vue" {
      import Vue from "vue";
      export default Vue;
  }
  

• La ejecución del comando npm run build como evento previo a la compilación en las propiedades del proyecto no funciona cuando se usa vue-cli 3.0.

Contenido relacionado

• Guía de introducción de Vue.
• Proyecto de CLI de Vue.
• Documentación de configuración de Webpack.