Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
In questa introduzione di 5-10 minuti all'ambiente di sviluppo integrato (IDE) di Visual Studio si creerà ed eseguirà una semplice applicazione Web Vue.js.
Prerequisiti
È necessario aver installato Visual Studio e il carico di lavoro di sviluppo Node.js.
Se Visual Studio 2019 non è già stato installato, passare alla pagina dei download di Visual Studio per installarlo gratuitamente.
Se devi installare il carico di lavoro ma hai già Visual Studio, vai su Strumenti>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.
È necessario che sia installato il runtime di Node.js.
Se non è installato, è consigliabile installare la versione LTS dal sito Web diNode.js per garantire la migliore compatibilità con framework e librerie esterni. Node.js è progettato per architetture a 32 bit e a 64 bit. Gli strumenti di Node.js in Visual Studio, inclusi nel carico di lavoro Node.js, supportano entrambe le versioni. È necessario un solo programma di installazione e il programma di installazione di Node.js supporta solo un programma di installazione alla volta.
In generale, Visual Studio rileva automaticamente il runtime di Node.js installato. Se non rileva un runtime installato, è possibile configurare il progetto in modo che faccia 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, scegliere Proprietà e impostare il percorsoNode.exe). È possibile usare un'installazione globale di Node.js oppure specificare il percorso di un interprete locale in ognuno dei progetti Node.js.
Creare un progetto
Prima di tutto, si creerà un progetto di applicazione Web Vue.js.
Se il runtime di Node.js non è già installato, installare la versione LTS dal sito Web Node.js .
Per altre informazioni, vedere i prerequisiti.
Apri Visual Studio.
Creare un nuovo progetto.
Premere esc per chiudere la finestra iniziale. Digitare CTRL+Q per aprire la casella di ricerca, digitare Basic Vue.js, quindi scegliere Basic Vue.js'applicazione Web (JavaScript o TypeScript). Nella finestra di dialogo visualizzata digitare il nome basic-vuejs e quindi scegliere Crea.
Se non viene visualizzato il modello di progetto Applicazione Web di base Vue.js, è necessario aggiungere il carico di lavoro di sviluppo Node.js. Per istruzioni dettagliate, vedere Prerequisiti.
Visual Studio crea il nuovo progetto. Il nuovo progetto viene aperto in Esplora soluzioni (riquadro destro).
Controllare la finestra Output (riquadro inferiore) per informazioni sullo stato di installazione dei pacchetti npm necessari per l'applicazione.
In Esplora soluzioni aprire il nodo npm e assicurarsi che siano installati tutti i pacchetti npm elencati.
Se mancano pacchetti (icona punto esclamativo), è possibile fare clic con il pulsante destro del mouse sul nodo npm e scegliere Installa pacchetti npm mancanti.
Esplorare l'IDE
Dai un'occhiata a Esplora soluzioni nel riquadro destro.
Evidenziato in grassetto è il progetto, usando il nome assegnato nella finestra di dialogo Nuovo progetto . Su disco, questo progetto è rappresentato da un oggetto . File njsproj nella cartella del progetto.
Al livello superiore è una soluzione, che per impostazione predefinita ha lo stesso nome del progetto. Una soluzione, rappresentata da un file sln sul disco, è un contenitore per uno o più progetti correlati.
Il nodo npm mostra tutti i pacchetti npm installati. È possibile fare clic con il pulsante destro del mouse sul nodo npm per cercare e installare pacchetti npm usando una finestra di dialogo.
Per installare pacchetti npm o eseguire comandi Node.js da un prompt dei comandi, fare clic con il pulsante destro del mouse sul nodo del progetto e scegliere Apri prompt dei comandi qui.
Aggiungere un file .vue al progetto
In Esplora soluzioni fare clic con il pulsante destro del mouse su qualsiasi cartella, ad esempio la cartella src/components , quindi scegliere Aggiungi>nuovo elemento.
Se non vengono visualizzati tutti i modelli di elemento, scegliere Mostra tutti i modellie quindi scegliere il modello di elemento.
Selezionare JavaScript Vue Single File Component o TypeScript Vue Single File Component e quindi fare clic su Aggiungi.
Visual Studio aggiunge il nuovo file al progetto.
Compilare il progetto
Scegliere quindi Compila>Compila soluzione per compilare il progetto.
Controllare la finestra Output per visualizzare i risultati della compilazione e scegliere Compila dall'elenco Mostra output.
Il modello di progetto JavaScript Vue.js (e versioni precedenti del modello TypeScript) usa lo build script npm configurando un evento di post-compilazione. Per modificare questa impostazione, aprire il file di progetto (<nomeprogetto.njsproj>) da Esplora risorse e individuare questa riga di codice:
<PostBuildEvent>npm run build</PostBuildEvent>
Eseguire l'applicazione
Premere CTRL+F5 (o Debug > Avvia senza eseguire debug) per eseguire l'applicazione.
Nella console viene visualizzato un messaggio Avvio del server di sviluppo.
L'app viene quindi aperta in un browser.
Se l'app in esecuzione non viene visualizzata, aggiornare la pagina.
Chiudere il Web browser.
Congratulazioni per aver completato questa guida rapida. Ci auguriamo che si sia appreso un po' sull'uso dell'IDE di Visual Studio con Vue.js. Per approfondire le funzionalità, continuare con un'esercitazione nella sezione Esercitazioni del sommario.