Wie kann ich Vue.js 2.0-Typings für TypScript erhalten, die mit Visual Studio arbeiten?

9

Ich versuche Vue.js 2.0 typings mit TypeScript in Visual Studio zu arbeiten. Zuvor hatte ich diese Typings von DefinitelyTyped verwendet, aber sie sind für Vue. js 1.0 und damit nicht übereinstimmen. Sie funktionierten jedoch einwandfrei und ließen mich mit dem Vue -Typ arbeiten.

Seitdem habe ich die Tippdateien, die mit den Vue.js-Releases ( hier geliefert werden), verwendet ). Ich habe sie in meinem Projekt in meinen ~/Scripts/typings/vue Ordner eingefügt, aber mein Projekt versteht sie nicht.

Ich habe festgestellt, dass diese Typisierungsdateien möglicherweise über Import / Export verwendet werden können? Es gibt keine anderen Typisierungsdateien, die ich benutze, die auf diese Weise funktionieren, daher bin ich mir nicht sicher, wie ich die Typings richtig implementieren kann, so dass sie global für mein Projekt verfügbar sind.

Ich habe eine Beispiellösung, die ein Beispiel dafür zeigt, was ich versucht habe - hier von meinem GitHub herunterladen Repo .

Hier ist die Struktur meines Scripts Ordners:

_references.d.ts Inhalt

%Vor%

vue_test.ts Inhalt

%Vor%

Was ich erwarten würde ist, dass ich Zugriff auf den Namespace Vue.Component und andere Namespaces hätte, die in typings/vue/index.d.ts deklariert sind, aber das scheint nicht der Fall zu sein.

Ich habe versucht, die exportierte Klasse wie folgt in global zu importieren:

%Vor%

Dies erlaubt mir jedoch nur, auf die root Vue -Klasse zuzugreifen, und daher kann ich nicht Vue.Component als Typ oder irgendeinen anderen Namespace jenseits von Vue angeben.

Weitere Informationen:
Visual Studio 2015
Vue.js Version 2.2.1
TypeScript Version 2.1

UPDATE nach Vorschlägen von @unional Hier ist meine neue Ordnerstruktur:

Kein _references.d.ts mehr, stattdessen tsconfig.json verwenden. Die Datei tsconfig.json enthält Folgendes:

%Vor%

Der obige Eintrag importiert alle .ts Dateien in das Projekt. Die Datei ~/Scripts/typings/custom-typings/vue.d.ts enthält Folgendes:

%Vor%

Visual Studio sagt mir Cannot find module 'vue' , also sind meine Typings immer noch nicht funktionsfähig, obwohl die Datei tsconfig.json funktioniert (ich habe die jQuery-Eingabe hinzugefügt, um das zu überprüfen).

Hier ist ein Link zu der aktualisierten Lösung, die die neuen Probleme zeigt: [link]

    
Jake 07.03.2017, 18:01
quelle

3 Antworten

0

Ich konnte Informationen aus @ unionals Kommentar verwenden, aber mit einer kleinen Änderung:

Ich habe das zu meiner custom-vue.d.ts Datei hinzugefügt:

%Vor%

Zusätzlich musste ich eine package.json Datei mit folgendem erstellen:

%Vor%

Schließlich musste ich einen node_modules Ordner im selben Bereich wie meine tsconfig.json Datei hinzufügen. Es hat folgendes:

%Vor%

package.json einfach enthält:

%Vor%

Und die Dinge arbeiten jetzt

Bearbeiten
Als Alternative habe ich entdeckt, dass ich die gesamte Sache node_modules vermeiden könnte, indem ich die Eigenschaft tsconfig.json für moduleResolution auf Classic setze. Nachdem ich das getan habe, habe ich meinen custom-vue.d.ts Import so geändert, dass er wie folgt aussieht:

%Vor%     
Jake 12.03.2017, 17:02
quelle
3

Mit NPM

Rufen Sie die Befehlszeile im Stammverzeichnis Ihrer App auf, um NPM und die TypeScript-Befehlszeilenschnittstelle zu verwenden.

  • Wenn Sie noch keine package.json-Datei haben, führen Sie zuerst npm init .
    • aus
  • Um vue.js zu installieren, führen Sie npm install --save vue .
    • aus
  • Um seine Typen zu installieren, führen Sie npm install --save-dev @types/vue .
    • aus
  • Wenn Sie auch keine Datei tsconfig.json haben, führen Sie tsc --init .
    • aus
  • Zu diesem Zeitpunkt können Sie Build erstellen, indem Sie tsc .
    • ausführen

Ohne NPM

Die Verwendung von NPM ist unkonventionell und erfordert viel manuelle Arbeit. Hier ist einer dieser manuellen Ansätze.

Laden Sie VueJS 2.1.1 aus dem GitHub Repo herunter. Nach dem Extrahieren des Archivs

  1. Fügen Sie den Inhalt von dist in das Verzeichnis Scripts/vuejs ,
    2. ein
  2. Fügen Sie den Inhalt von typings in das Verzeichnis typings/vuejs ,
    3. ein
  3. Fügen Sie Ihrem Projektstamm eine tsconfig.json-Datei hinzu, die diesen Inhalt enthält.

tsconfig.json

%Vor%

Fügen Sie am Anfang der Datei, die Vue verwendet, eine relative Importanweisung hinzu.

%Vor%

Beispiel

Hier finden Sie eine aktualisierte Version Ihres WebApplication1-Beispiels.

Ссылка

Siehe auch:

Ссылка

Ссылка

    
Shaun Luttin 11.03.2017 18:22
quelle
0

Da der Fehler zur Kompilierzeit ist, kein großes Problem darin. Sie können dieses Plugin für eine schnellere Entwicklung von hier verwenden

Außerdem sollte der Code wie

sein %Vor%

und so weiter. Sie können die vuejs weiterhin in Ihren cshtml-Dateien verwenden.

    
Aravind 11.03.2017 19:23
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Plattformübergreifender Hintergrunddienst in .NET Core (Think Windows-Dienst / Unix-Daemon)?