Creare un'applicazione Vue.js usando Node.js Tools per Visual Studio

  • Articolo

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

Le nuove funzionalità seguenti supportano lo sviluppo di applicazioni Vue.js in Visual Studio:

  • Supporto per blocchi Script, Style e Template nei file .vue
  • Riconoscimento dell'attributo lang nei file .vue
  • Vue.js modelli di progetto e file

Prerequisiti

  • È necessario avere installata la versione 15.8 o successiva di Visual Studio 2017 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 richiesta, installare Visual Studio 2019.

    Se è necessario installare il carico di lavoro ma è già disponibile Visual Studio, vai a Strumenti di >Ottieni strumenti e funzionalità..., che apre il programma di installazione di Visual Studio. Scegliere il carico di lavoro di sviluppo Node.js, quindi scegliere Modifica.

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

  • È necessario che sia installato il runtime di Node.js.

    Se non è installato, installare la versione LTS dal sito Web di 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 di Vue.js usando Node.js

È possibile usare i nuovi modelli di Vue.js per creare un nuovo progetto. L'uso del modello è il modo più semplice per iniziare. Per i passaggi dettagliati, vedere Usare Visual Studio per creare la prima app Vue.js.

Creare un progetto di Vue.js con ASP.NET Core e l'interfaccia della riga di comando di Vue

Vue.js fornisce un'interfaccia della riga di comando ufficiale per la rapida creazione dei progetti. Se si vuole usare l'interfaccia della riga di comando per creare l'applicazione, seguire la procedura descritta in questo articolo per configurare l'ambiente di sviluppo.

Importante

Questi passaggi presuppongono che l'utente abbia già esperienza con il framework di Vue.js. In caso contrario, visitare Vue.js per altre informazioni sul framework.

Creare un nuovo progetto ASP.NET Core

Per questo esempio, si utilizza 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 File>Finestra iniziale. Digitare 'app Web, scegliere C# come linguaggio, quindi scegliere ASP.NET Core Emptye quindi scegliere Avanti. Nella schermata successiva assegnare al progetto il nome client-appe quindi scegliere Avanti.

    Scegliere il framework di destinazione consigliato o .NET 6, poi scegliere Crea.

    Se non viene visualizzato il modello di progetto ASP.NET'applicazione Web core, è necessario installare il carico di lavoro ASP.NET e sviluppo Web e .carico di lavoro di sviluppo NET Core. Per installare il carico di lavoro, fare clic sul collegamento Apri Programma di Installazione di Visual Studio nel pannello sinistro della finestra di dialogo Nuovo Progetto (selezionare File>Nuovo>Progetto). Viene 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 CLI di Vue

Per installare il modulo npm vue-cli, 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).

Impostare una nuova applicazione client usando Vue CLI

  1. Vai al prompt dei comandi e cambia la directory corrente nella cartella radice del progetto.

  2. Digitare vue init webpack client-app e seguire i passaggi quando viene richiesto di rispondere ad altre domande.

    Nota

    Per i file .vue, è necessario utilizzare webpack o un framework simile con un loader per effettuare la conversione. TypeScript e Visual Studio non sanno come compilare file con estensione vue. Lo stesso vale per la creazione di bundle; TypeScript non è in grado di convertire moduli ES2015 (ovvero import e istruzioni export) in un singolo file finale .js da caricare nel browser. Anche in questo caso, webpack è la scelta migliore qui. Per eseguire questo processo da Visual Studio usando MSBuild, è necessario iniziare da un modello di Visual Studio. Attualmente non è disponibile alcun modello di ASP.NET integrato per lo sviluppo Vue.js.

Modificare la configurazione webpack per restituire i file compilati in wwwroot

  • Aprire il file ./client-app/config/index.jse modificare il build.index e build.assetsRoot in wwwroot path:

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

// Paths
assetsRoot: path.resolve(__dirname, '../../wwwroot'),

Indicare il progetto per compilare l'app client ogni volta che viene attivata una compilazione

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

  2. Nella riga di comando dell'evento di 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.jse aggiungere le proprietà seguenti alla proprietà di output:

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

Aggiungere il supporto di TypeScript con l'interfaccia della riga di comando di Vue

Questi passaggi richiedono vue-cli 3.0, che è attualmente in versione beta.

  1. Vai al prompt dei comandi e cambia la directory corrente alla cartella principale del progetto.

  2. Digitare vue create client-appe quindi scegliere Selezionare manualmente le funzionalità.

  3. Scegliere TypeScripte quindi selezionare altre opzioni desiderate.

  4. Seguire 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 intasare il tuo progetto ogni volta che si compila 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 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 scheda Compilazione, nella casella di testo Riga di comando evento di pre-compilazione.

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

Limitazioni

  • lang attributo supporta solo linguaggi JavaScript e TypeScript. I valori accettati sono: js, jsx, ts e tsx.

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

  • Il debug dei blocchi di script nei file .vue non è supportato a causa della loro natura preprocessata.

  • TypeScript non riconosce i file .vue come moduli. È necessario un file contenente codice come il seguente per indicare a TypeScript quale 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 nelle proprietà del progetto non funziona quando si usa vue-cli 3.0.

Contenuto correlato