Skapa ett Vue.js-program med hjälp av Node.js Tools för Visual Studio

2025-01-26

Visual Studio stöder apputveckling med Vue.js ramverket i antingen JavaScript eller TypeScript.

Följande nya funktioner stöder Vue.js programutveckling i Visual Studio:

Stöd för skript-, stil- och mallblock i .vue-filer
Igenkänning av attributet lang på .vue-filer
Vue.js projekt- och filmmallar

Förutsättningar

Du måste ha Visual Studio 2017 version 15.8 eller en senare version installerad samt utvecklingsarbetsbelastning Node.js.

Viktig

Den här artikeln kräver funktioner som endast är tillgängliga från och med Visual Studio 2017 version 15.8.

Om en nödvändig version inte redan är installerad installerar du Visual Studio 2019.

Om du behöver installera arbetsbelastningen men redan har Visual Studio går du till Verktyg>Hämta verktyg och funktioner..., som öppnar Installationsprogrammet för Visual Studio. Välj arbetsbelastningen Node.js utveckling och välj sedan Ändra.
Om du vill skapa ASP.NET Core-projektet måste du ha arbetsbelastningarna ASP.NET och webbutveckling och .NET Core plattformsoberoende utveckling installerade.
Du måste ha Node.js-körtid installerad.

Om du inte har installerat den installerar du LTS-versionen från Node.js webbplats. Vanligtvis identifierar Visual Studio automatiskt den installerade Node.js-körtiden. Om den inte identifierar en installerad körning kan du konfigurera projektet så att det refererar till den installerade körningen på egenskapssidan. (När du har skapat ett projekt högerklickar du på projektnoden och väljer Egenskaper).

Skapa ett Vue.js projekt med hjälp av Node.js

Du kan använda de nya Vue.js mallarna för att skapa ett nytt projekt. Det enklaste sättet att komma igång är att använda mallen. Detaljerade steg finns i Använda Visual Studio för att skapa din första Vue.js app.

Skapa ett Vue.js projekt med ASP.NET Core och Vue CLI

Vue.js tillhandahåller ett officiellt CLI för snabbt skapa projekt. Om du vill använda CLI för att skapa ditt program följer du stegen i den här artikeln för att konfigurera utvecklingsmiljön.

Viktig

De här stegen förutsätter att du redan har viss erfarenhet av Vue.js ramverket. Annars kan du besöka Vue.js för att lära dig mer om ramverket.

Skapa ett nytt ASP.NET Core-projekt

I det här exemplet använder du ett tomt ASP.NET Core Application (C#). Du kan dock välja mellan olika projekt och programmeringsspråk.

Skapa ett tomt projekt

Öppna Visual Studio och skapa ett nytt projekt.

I Visual Studio 2019 väljer du Skapa ett nytt projekt i startfönstret. Om startfönstret inte är öppet väljer du Fil>Startfönster. Skriv webbapp, välj C# som språk, välj sedan ASP.NET Core Emptyoch välj sedan Nästa. På nästa skärm namnger du projektet klientappenoch väljer sedan Nästa.

Välj antingen det rekommenderade målramverket eller .NET 6 och välj sedan Skapa.

Om du inte ser ASP.NET Core Web Application-projektmallen måste du installera arbetsbelastningen ASP.NET och webbutveckling och .NET Core utvecklingsarbetsbelastning först. Om du vill installera arbetsbelastningarna klickar du på länken Öppna Visual Studio Installer i den vänstra rutan i dialogrutan Nytt projekt (välj Fil>Nytt>Projekt). Visual Studio Installer startas. Välj de arbetsbelastningar som krävs.

Konfigurera startfilen för projektet

Öppna filen ./Startup.csoch lägg till följande rader i metoden Konfigurera:

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

Installera Vue CLI

Om du vill installera npm-modulen vue-cli öppnar du en kommandotolk och skriver npm install --g vue-cli eller npm install -g @vue/cli för version 3.0 (för närvarande i betaversion).

Skapa en ny klientapp med Vue CLI

Gå till kommandotolken och ändra den aktuella katalogen till projektrotmappen.
Skriv vue init webpack client-app och följ stegen när du uppmanas att besvara ytterligare frågor.

Not

För .vue- filer måste du använda webpack eller ett liknande ramverk med en inläsare för att utföra konverteringen. TypeScript och Visual Studio vet inte hur du kompilerar .vue- filer. Samma sak gäller för paketering. TypeScript vet inte hur man konverterar ES2015-moduler (dvs. import- och export-instruktioner) till en enda slutlig .js fil som ska läsas in i webbläsaren. Återigen är webpack det bästa valet här. Om du vill köra den här processen inifrån Visual Studio med hjälp av MSBuild måste du börja från en Visual Studio-mall. För närvarande finns det inga ASP.NET mallar för Vue.js-utveckling som standard.

Ändra webpack-konfigurationen för att mata ut de skapade filerna till wwwroot

Öppna filen ./client-app/config/index.jsoch ändra build.index och build.assetsRoot till wwwroot-sökvägen:

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

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

Ange projektet för att skapa klientappen varje gång en version utlöses

I Visual Studio går du till Project>Properties>Build Events.
Skriv på kommandoraden för förbyggnadshändelsen npm --prefix ./client-app run build.

Konfigurera namn på utdatamodulen för webpack

Öppna filen ./client-app/build/webpack.base.conf.jsoch lägg till följande egenskaper i utdataegenskapen:

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

Lägga till TypeScript-stöd med Vue CLI

De här stegen kräver vue-cli 3.0, som för närvarande är i betaversion.

Gå till kommandotolken och ändra den aktuella katalogen till projektrotmappen.
Skriv vue create client-appoch välj sedan Välj funktioner manuellt.
Välj TypeScript-och välj sedan andra önskade alternativ.
Följ de återstående stegen och svara på frågorna.

Konfigurera ett Vue.js projekt för TypeScript

Öppna filen ./client-app/tsconfig.json och lägg till noEmit:true i kompileringsalternativen.

Genom att ange det här alternativet undviker du att belamra projektet varje gång du skapar i Visual Studio.

Skapa sedan en vue.config.js fil i ./client-app/ och lägg till följande kod.

module.exports = {
    outputDir: '../wwwroot',

    configureWebpack: {
        output: {
            devtoolModuleFilenameTemplate: '[absolute-resource-path]',
            devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
        }
    }
};

Föregående kod konfigurerar webpack och anger mappen wwwroot.

Skapa med vue-cli 3.0

Ett okänt problem med vue-cli 3.0 kan förhindra att byggprocessen automatiseras. Varje gång du försöker uppdatera mappen wwwroot måste du köra kommandot npm run build i mappen client-app.

Du kan också skapa vue-cli 3.0-projektet som en förversionshändelse med hjälp av ASP.NET projektegenskaper. Högerklicka på projektet, välj Egenskaperoch inkludera följande kommandon på fliken Kompilera i textrutan för kommandoraden Förberedande kompileringsevent.

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

Begränsningar

lang-attributet stöder endast JavaScript- och TypeScript-språk. De godkända värdena är: js, jsx, ts och tsx.
lang-attributet fungerar inte med mall- eller formattaggar.
Felsökning av skriptblock i .vue filer stöds inte på grund av dess förbearbetade natur.
TypeScript känner inte igen .vue- filer som moduler. Du behöver en fil som innehåller kod, till exempel följande för att tala om för TypeScript hur .vue filer ser ut (mallen vue-cli 3.0 innehåller redan den här filen).
```
// ./client-app/vue-shims.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}
```
Att köra kommandot npm run build som en förskapad händelse i projektegenskaperna fungerar inte när du använder vue-cli 3.0.

Feedback

Var den här sidan till hjälp?