Creare un'applicazione Vue.js tramite Node.js Tools for Visual Studio

Visual Studio supporta lo sviluppo di app con il framework Vue.js in JavaScript o TypeScript.

Lo sviluppo di applicazioni Vue.js in Visual Studio è supportato dalle nuove funzionalità seguenti:

• Supporto dei blocchi di script, stili e modelli nei file con estensione vue
• Riconoscimento dell'attributo lang nei file con estensione vue
• Modelli di progetto e di file di Vue.js

Prerequisiti

• È necessario che siano installati Visual Studio 2017 versione 15.8 o una versione successiva e il carico di lavoro di sviluppo Node.js.

  Importante

  Questo articolo richiede funzionalità disponibili solo a partire da Visual Studio 2017 versione 15.8.

  Se non è già installata una versione necessaria, installare Visual Studio 2019.

  Se occorre installare il carico di lavoro, ma si ha già Visual Studio, passare a Strumenti>Ottieni strumenti e funzionalità, che apre il programma di installazione di Visual Studio. Scegliere il carico di lavoro Sviluppo Node.js, quindi scegliere Modifica.

• Per creare il progetto ASP.NET Core, è necessario che siano installati i carichi di lavoro Sviluppo ASP.NET e Web e il carico di lavoro di sviluppo multipiattaforma di .NET Core.

• Il runtime di Node.js deve essere installato.

  Se il runtime non è installato, installare la versione LTS dal sito Web Node.js. In generale, Visual Studio rileva automaticamente il runtime di Node.js installato. Se non rileva un runtime installato, è possibile configurare il progetto per fare riferimento al runtime installato nella pagina delle proprietà. Dopo aver creato un progetto, fare clic con il pulsante destro del mouse sul nodo del progetto e scegliere Proprietà.

Creare un progetto Vue.js usando Node.js

Per creare un nuovo progetto, è possibile usare i nuovi modelli Vue.js. L'uso di un modello è il modo più semplice per iniziare. Per la procedura dettagliata, vedere Use Visual Studio to create your first Vue.js app (Creare la prima app Vue.js con Visual Studio).

Creare un progetto Vue.js con ASP.NET Core e la Common Language Infrastructure di Vue

Vue.js rende disponibile una Common Language Infrastructure ufficiale per lo scaffolding rapido dei progetti. Se si vuole usare la Common Language Infrastructure per creare l'applicazione, seguire la procedura descritta in questo articolo per configurare l'ambiente di sviluppo.

Creare un nuovo progetto ASP.NET Core

In questo esempio si usa un'applicazione ASP.NET Core vuota (C#). Tuttavia, è possibile scegliere tra vari progetti e linguaggi di programmazione.

Creare un progetto vuoto

• Aprire Visual Studio e creare un nuovo progetto.

  In Visual Studio 2019 scegliere Crea un nuovo progetto nella finestra iniziale. Se la finestra iniziale non è aperta, scegliere Finestra di avvio file>. Digitare l'app Web, scegliere C# come linguaggio, quindi scegliere ASP.NET Core Empty e quindi scegliere Avanti. Nella schermata successiva assegnare al progetto il nome client-app e quindi scegliere Avanti.

  Scegliere il framework di destinazione consigliato o .NET 6 e quindi scegliere Crea.

  Se il modello di progetto Applicazione Web ASP.NET Core non è visualizzato, è prima necessario installare il carico di lavoro Sviluppo ASP.NET e Web e il carico di lavoro di sviluppo di .NET Core. Per installare uno o entrambi i carichi di lavoro, fare clic sul collegamento Apri il programma di installazione di Visual Studio nel riquadro sinistro della finestra di dialogo Nuovo progetto (selezionare File>Nuovo>Progetto). Verrà avviato il Programma di installazione di Visual Studio. Selezionare i carichi di lavoro necessari.

Configurare il file di avvio del progetto

• Aprire il file ./Startup.cse aggiungere le righe seguenti al metodo Configure:

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

Installare la Common Language Infrastructure di vue

Per installare il modulo vue-cli npm, aprire un prompt dei comandi e digitare npm install --g vue-cli o npm install -g @vue/cli per la versione 3.0 (attualmente in versione beta).

Eseguire lo scaffolding di una nuova applicazione client tramite la Common Language Infrastructure di vue

1. Passare al prompt dei comandi e passare dalla directory corrente alla cartella radice del progetto.

2. Digitare vue init webpack client-app e seguire questa procedura quando viene richiesto di rispondere a domande aggiuntive.

   Nota

   Per i file con estensione vue, è necessario usare Webpack o un framework simile con un caricatore per eseguire la conversione. TypeScript e Visual Studio non supportano la compilazione di file vue. Lo stesso vale per la creazione di bundle. TypeScript non supporta la conversione di moduli ES2015 (ovvero, le istruzioni import e export) in un singolo file js finale da caricare nel browser. Anche in questo caso, Webpack è la scelta migliore. Per gestire questo processo da Visual Studio con MSBuild, è necessario iniziare da un modello di Visual Studio. Al momento, non è disponibile alcun modello ASP.NET predefinito per lo sviluppo di Vue.js.

Modificare la configurazione di Webpack per restituire i file compilati in wwwroot

• Aprire il file ./client-app/config/index.js e modificare build.index e build.assetsRoot nel percorso wwwroot:

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

Indicare il progetto per la compilazione dell'app client ogni volta che viene attivata una compilazione

1. In Visual Studio passare a Progetto>Proprietà>Eventi di compilazione.

2. In Riga di comando eventi pre-compilazione digitare npm --prefix ./client-app run build.

Configurare i nomi dei moduli di output di Webpack

• Aprire il file ./client-app/build/webpack.base.conf.js e aggiungere le proprietà seguenti alla proprietà di output:

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

Aggiungere il supporto di TypeScript con la Common Language Infrastructure di Vue

Questa procedura richiede vue-cli 3.0, che attualmente è in versione beta.

1. Passare al prompt dei comandi e passare dalla directory corrente alla cartella radice del progetto.

2. Digitare vue create client-app e quindi scegliere Manually select features (Seleziona manualmente le funzionalità).

3. Scegliere TypeScripte quindi selezionare le altre opzioni desiderate.

4. Eseguire i passaggi rimanenti e rispondere alle domande.

Configurare un progetto Vue.js per TypeScript

1. Aprire il file ./client-app/tsconfig.json e aggiungere noEmit:true alle opzioni del compilatore.

   Impostando questa opzione si evita di sovraccaricare il progetto ogni volta che si esegue la compilazione in Visual Studio.

2. Creare quindi un file vue.config.js in ./client-app/ e aggiungere il codice seguente.

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

   Il codice precedente configura Webpack e imposta la cartella wwwroot.

Compilare con vue-cli 3.0

Un problema sconosciuto con vue-cli 3.0 potrebbe impedire l'automazione del processo di compilazione. Ogni volta che si tenta di aggiornare la cartella wwwroot, è necessario eseguire il comando npm run build nella cartella client-app.

In alternativa, è possibile compilare il progetto vue-cli 3.0 come un evento di pre-compilazione usando le proprietà del progetto ASP.NET. Fare clic con il pulsante destro del mouse sul progetto, scegliere Proprietà e includere i comandi seguenti nella casella di testo Riga di comando eventi pre-compilazione della scheda Compilazione.

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

Limiti

• L'attributo lang supporta solo i linguaggi JavaScript e TypeScript. I valori consentiti sono js, jsx, ts e tsx.

• L'attributo lang non funziona con i tag di stile o di modello.

• Il debug di blocchi di script nei file con estensione vue non è supportato a causa della sua natura pre-elaborata.

• TypeScript non riconosce i file con estensione vue come moduli. È necessario un file che contenga codice come il seguente che informi TypeScript dell'aspetto dei file con estensione vue. Il modello vue-cli 3.0 include già questo file.

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

• L'esecuzione del comando npm run build come evento di pre-compilazione per le proprietà del progetto non funziona se si usa vue-cli 3.0.

Contenuto correlato

• Guida introduttiva di Vue.
• Progetto Vue CLI.
• Documentazione sulla configurazione di webpack.