Vue.js-alkalmazás létrehozása a Node.js Tools for Visual Studio használatával

A Visual Studio támogatja az alkalmazásfejlesztést a Vue.js-keretrendszerrel JavaScriptben vagy TypeScriptben.

Az alábbi új funkciók támogatják Vue.js alkalmazásfejlesztést a Visual Studióban:

Szkriptek, stílusok és sablonblokkok támogatása .vue fájlokban
A lang attribútum felismerése .vue fájlokon
projekt- és fájlsablonok Vue.js

Előfeltételek

Telepítve kell lennie a Visual Studio 2017 15.8-es vagy újabb verziójának, valamint a Node.js fejlesztési számítási feladatnak.

Fontos

Ez a cikk olyan funkciókat igényel, amelyek csak a Visual Studio 2017 15.8-s verziójától érhetők el.

Ha még nincs telepítve egy szükséges verzió, telepítse Visual Studio 2019.

Ha telepítenie kell egy komponenst, de már telepítve van a Visual Studio, lépjen a Eszközök>Eszközök és szolgáltatások lekérése...lehetőségre, amely megnyitja a Visual Studio Telepítőt. Válassza ki a Node.js fejlesztési feladatot, majd válassza a Módosításlehetőséget.
A ASP.NET Core-projekt létrehozásához telepítve kell lennie a ASP.NET és a webfejlesztésnek, valamint a .NET Core platformfüggetlen fejlesztési számítási feladatainak.
Telepítve kell lennie a Node.js futtatókörnyezetnek.

Ha nincs telepítve, telepítse az LTS-verziót a Node.js webhelyről. A Visual Studio általában automatikusan észleli a telepített Node.js futtatókörnyezetet. Ha nem észlel telepített futtatókörnyezetet, konfigurálhatja a projektet úgy, hogy a tulajdonságok lapon hivatkozzon a telepített futtatókörnyezetre. (Miután létrehozott egy projektet, kattintson a jobb gombbal a projektcsomópontra, és válassza a Tulajdonságok).

Vue.js-projekt létrehozása Node.js használatával

Az új Vue.js sablonokkal új projektet hozhat létre. A sablon használata a legegyszerűbb módja az első lépéseknek. Részletes lépésekért lásd: Az első Vue.js alkalmazás létrehozása a Visual Studióval.

Vue.js-projekt létrehozása a ASP.NET Core és a Vue parancssori felület használatával

Vue.js egy hivatalos parancssori eszközt biztosít a projektek gyors generálásához. Ha a parancssori felülettel szeretné létrehozni az alkalmazást, kövesse a jelen cikkben ismertetett lépéseket a fejlesztési környezet beállításához.

Fontos

Ezek a lépések feltételezik, hogy már rendelkezik némi tapasztalattal a Vue.js keretrendszerrel kapcsolatban. Ha nem, látogasson el Vue.js, hogy többet tudjon meg a keretrendszerről.

Új ASP.NET Core-projekt létrehozása

Ebben a példában egy üres ASP.NET Core-alkalmazást (C#) használ. Azonban különböző projektek és programozási nyelvek közül választhat.

Üres projekt létrehozása

Nyissa meg a Visual Studiót, és hozzon létre egy új projektet.

A Visual Studio 2019-ben válassza Új projekt létrehozása a kezdési ablakban. Ha a kezdőablak nincs megnyitva, válassza Fájl>Ablak indításalehetőséget. Írja be a webalkalmazást, válassza a C# nyelvet, majd válassza az ASP.NET Core Üreselemet, és végül válassza a Következőlehetőséget. A következő képernyőn nevezze el a projektet ügyfélalkalmazás, majd válassza a Továbblehetőséget.

Válassza ki az ajánlott cél keretrendszert vagy a .NET 6-ot, majd válassza a létrehozása lehetőséget.

Ha nem látja a ASP.NET Core Web Application projektsablont, telepítenie kell a ASP.NET és a webfejlesztési számítási feladatot és aNET Core fejlesztési számítási feladatot először. A munkaterhelések telepítéséhez kattintson a Visual Studio Installer megnyitása linkre az Új projekt párbeszédablak bal oldali ablaktábláján (válassza a Fájl>Új>Projektmenüpontot). Elindul a Visual Studio Installer. Válassza ki a szükséges számítási feladatokat.

A projekt indítási fájljának konfigurálása

Nyissa meg a fájlt ./Startup.cs, és adja hozzá a következő sorokat a Konfigurálás metódushoz:

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

A Vue parancssori felület telepítése

A vue-cli npm modul telepítéséhez nyisson meg egy parancssort, és írja be npm install --g vue-cli vagy npm install -g @vue/cli a 3.0-s verzióhoz (jelenleg bétaverzióban).

Új ügyfélalkalmazás létrehozása a Vue parancssori felület használatával

Nyissa meg a parancssort, és változtassa meg az aktuális könyvtárat a projekt gyökérmappájára.
Írja be vue init webpack client-app, és kövesse a lépéseket, amikor a rendszer további kérdések megválaszolására kéri.

Jegyzet

.vue fájlok esetében a konvertáláshoz webpack vagy hasonló keretrendszert kell használnia egy betöltővel. A TypeScript és a Visual Studio nem tudja, hogyan kell lefordítani .vue fájlokat. Ugyanez igaz a csomagküldőre is; A TypeScript nem tudja, hogyan konvertálhatja az ES2015-modulokat (azaz import és export utasítások) egyetlen végső .js fájllá a böngészőbe való betöltéséhez. Itt is a webpack a legjobb választás. Ha ezt a folyamatot az MSBuild használatával szeretné végrehajtani a Visual Studióban, először egy Visual Studio-sablonból kell kiindulnia. Jelenleg nincs ASP.NET sablon Vue.js fejlesztéshez a dobozban.

Módosítsa a webpack konfigurációját úgy, hogy a létrehozott fájlokat a wwwroot fájlba adja ki

Nyissa meg a fájlt ./client-app/config/index.js, és módosítsa a build.index és build.assetsRoot a wwwroot elérési útra:

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

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

Jelölje meg azt a projektet, amely minden egyes build aktiválásakor létrehozza az ügyfélalkalmazást

A Visual Studióban nyissa meg Project>Tulajdonságok>Események létrehozásalehetőséget.
Az előre elkészített esemény parancssorábanírja be a npm --prefix ./client-app run build.

A webpack kimeneti moduljának nevének konfigurálása

Nyissa meg a fájlt ./client-app/build/webpack.base.conf.js, és adja hozzá a következő tulajdonságokat a kimeneti tulajdonsághoz:
```
devtoolModuleFilenameTemplate: '[absolute-resource-path]',
devtoolFallbackModuleFilenameTemplate: '[absolute-resource-path]?[hash]'
```

TypeScript-támogatás hozzáadása a Vue parancssori felülettel

Ezekhez a lépésekhez vue-cli 3.0 szükséges, amely jelenleg bétaverzióban érhető el.

Nyissa meg a parancssort, és változtassa meg az aktuális könyvtárát a projekt gyökérkönyvtárába.
Írja be a vue create client-app, majd válassza a Funkciók manuális kiválasztásalehetőséget.
Válassza a TypeScriptlehetőséget, majd válasszon más kívánt beállításokat.
Kövesse a többi lépést, és válaszoljon a kérdésekre.

Vue.js-projekt konfigurálása TypeScripthez

Nyissa meg a fájlt ./client-app/tsconfig.json, és adja hozzá a noEmit:true a fordító beállításaihoz.

Ennek a beállításnak a beállításával elkerülheti a projekt zsúfoltságát minden alkalommal, amikor a Visual Studióban épít.

Ezután hozzon létre egy vue.config.js fájlt ./client-app/, és adja hozzá a következő kódot.

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

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

Az előző kód konfigurálja a webpackot, és beállítja a wwwroot mappát.

Építés a vue-cli 3.0-mal

A vue-cli 3.0 ismeretlen hibája megakadályozhatja a buildelési folyamat automatizálását. Minden alkalommal, amikor megpróbálja frissíteni a wwwroot mappát, futtatnia kell a parancsot npm run build az ügyfél-alkalmazás mappában.

Másik lehetőségként a vue-cli 3.0 projektet buildelő eseményként is létrehozhatja a ASP.NET projekttulajdonságok használatával. Kattintson a jobb gombbal a projektre, válassza a Tulajdonságoklehetőséget, és adja meg a következő parancsokat a Build lapon, a Build előtti esemény parancssorában szövegmezőben.

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

Korlátozások

lang attribútum csak a JavaScript- és TypeScript-nyelveket támogatja. Az elfogadott értékek a következők: js, jsx, ts és tsx.
lang attribútum nem használható sablon- vagy stíluscímkékkel.
A .vue fájlokban lévő szkriptblokkok hibakeresése előre feldolgozott jellege miatt nem támogatott.
A TypeScript nem ismeri fel .vue fájlokat modulként. Olyan fájlra van szüksége, amely a következőhöz hasonló kódot tartalmaz, hogy meg tudja mondani a TypeScriptnek, hogyan néznek ki .vue fájlok (a vue-cli 3.0 sablon már tartalmazza ezt a fájlt).
```
// ./client-app/vue-shims.d.ts
declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}
```
Ha a vue-cli 3.0-t használja, a parancs npm run build előre buildelési eseményként való futtatása a projekttulajdonságokon nem működik.

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-01-26