Vue + Typoskript: Ein Spiel in den Code-Editor

0
21

Vue ist so heiß, gerade jetzt, und ich habe darüber nachgedacht, ein ernsthaftes Projekt mit dem er seit geraumer Zeit, also wenn sich die Gelegenheit auftauchte, hüpfte ich in. Aber es gab ein kleines problem — eine der Anforderungen des Projektes war, es zu schreiben in Maschinenschrift. Zunächst war ich super gestresst über, wie ich jemals bekommen, begann auf diese combo, aber vue-cli-so einfach gemacht.

Ich würde Lügen, wenn ich sagte, diese Fahrt war super glatt. Es gab Frustrationen, stundenlangen starren auf den Bildschirm und einige fistbumps mit meinem Tisch, aber nach der Arbeit mit Vue + Typoskript für über einen Monat jetzt, kann ich sagen, es hat sich gelohnt — und wenn ich code einer anderen app mit Vue, würde ich es nicht tun, ohne Typoskript.

Voraussetzungen

Dieser Artikel ist über die Kopplung Vue und Typoskript und übernimmt einige grundlegende Kenntnisse der beiden. Wenn Sie haven ‘ T hatte eine chance, mit Ihnen zu spielen noch und sind gespannt, Vue hat einen großen Führer, und das Typoskript docs sind ein großartiger Ort zu starten.

Wir müssen vue-cli Global installiert, so können wir schnell spin up, Vue Projekt. Installieren vue-cli durch ausführen des folgenden Befehls im terminal:

npm install-g @vue/cli

Sobald wir das installiert haben, sind wir gut zu gehen. Wenn Sie nicht haben, Typoskript installiert, wir brauchen Sie nicht zu tun, dass vorher, als vue-cli kümmert sich um dass, wenn Sie beginnen ein neues Projekt und wählen Sie Typoskript gibt.

Erste Schritte

Nun haben wir die vue-cli installiert ist, alles, was wir tun müssen, um ein Projekt mit Vue + Typoskript begann zu laufen, vue erstellen. Beim anlegen eines neuen Projekts wählen Sie ” Typoskript und wir sind gut zu gehen.

vue erstellen <app-name>

Hier ist das Ergebnis, wenn unser Projekt startet:

vue-cli bietet uns auch die Möglichkeit zu wählen, Babel zusammen mit TypeScript für polyfills, CSS-Präprozessoren, linter, unit-testing-Bibliotheken (ich nahm den Scherz, gehe Scherz!) zusammen mit anderen config. Sie können auch speichern Sie Ihre Wahl in einem preset, um es später zu verwenden, für ein anderes Projekt.

Hier ist ein überblick über die praktischen Fragen werden Sie gefragt, um das Projekt so konfigurieren:

Eine Sache, die ich erwähnen möchte ist, dass vue-cli 3.0 kommt mit einer Benutzeroberfläche, das macht es noch einfacher, ein neues Projekt erstellen. Laufen vue Benutzeroberfläche im terminal-und vue-cli-öffnet eine Benutzeroberfläche, in dem Sie ein neues Projekt einrichten.

Was ist in der Box

Nach vue-cli ist getan, wir bekommen ein schönes directory-Struktur unserer app mit allen setup schon gemacht.

  • tsconfig.json: Dies ist alles eingerichtet und wir können es Bearbeiten, die für unsere Anforderungen.
  • shims-vue.d….ts: Diese Scheiben sind bereits bis zu helfen, Typoskript verstehen .vue-Dateien (Single-File-Komponenten) wenn Sie importiert werden.
  • vue-Eigenschaft-decorator: Wenn Sie die Klasse verwenden-Stil-Komponenten, vue-cli fügt dieses plugin, so können wir alle Arten von Dekoratoren. Dies kommt in ganz praktisch und machen den code lesbarer zu gestalten.
  • Klasse-Komponenten: Wenn Sie sich entscheiden, Sie zu benutzen, vue-cli-sets die Bühne für Sie. Bedenken Sie, dass Sie noch brauchen, um zu registrieren, router Haken, damit die Komponenten von Klassen können Sie zu lösen.

Sass-Setup

Eine Sache, die ich brauchte, um, und dass ich wünschte, enthalten war aus der box geteilt wurde, Sass-partials. Um zu vermeiden, importieren meiner Sass-Variablen und-Mixins in Verbindung, die in jeder Komponente, die ich hatte, Sie zu laden in vue.config.js. geteilt wird.scss ist die Datei exportieren, werden alle Variablen und Mixins in Verbindung, die verwendet werden, innerhalb der app.

Hier, wo ich gelandet mit meiner Sass Konfiguration:

chainWebpack: (config) => {
config
.Modul
.Regel(‘vue’)
.verwendet
.get(‘vue-loader’)
.Tippen Sie auf(({ Lader, Lader: { scss }, Optionen…}) = > ({
…Optionen,
Lader: {
…Frontlader,
scss: [
…scss,
{
loader: ‘sass-Ressourcen-loader’,
Optionen: {
Ressourcen: [
‘./src/styles/shared.scss’,
],
},
},
],
},
}));

Vue Decorator-Eigenschaft

Die vue-Eigenschaft-decorator-Paket stellt Vue Eigenschaften und macht Sie als Dekorateure. In meiner Anwendung, ich landete mit nur @Component, @Prop, @Ansehen, aber es gibt auch andere, wie @Emittieren, @Inject und @Modell, dass Ihr code viel Ausführlicher, wenn intensiv genutzt.

Vuex

Vuex-Testungen hat…nuff said! Vuex unterstützt Typoskript zu Booten und auf den ersten, wusste ich gar nicht. Ich begann zu suchen, die richtigen Wege zu kombinieren, Vuex mit Typoskript und stolperte über Alex Jover Morales’ eierkopf.io natürlich auf Vue.js State-Management mit Vuex und Typoskript. Es hat mir geholfen, zu verstehen, den richtigen Umgang mit Vuex Zustand bei der Verwendung von Typoskript.

Zum Beispiel:

// Aktionen.ts
import { ActionTree } aus ‘vuex’;
import { RootState, ModuleState } ‘@/ – Typen’;

const Aktionen: ActionTree<ModuleState, RootState> = {
// alle Ihre Handlungen gehen Sie hier
};

Vuex-Klasse

Dies ist noch eine andere Sache, die ich nicht kannte, existierte, als ich angefangen habe, aber wissen möchte ich es gefunden hatte, früher. Ich war das erstellen von Getter für fast alles, aber das fühlte sich nicht richtig an. Ich begann auf der Suche nach besseren Möglichkeiten, dies zu tun und einen interessanten Artikel gefunden, die von Francesco Vitullo, die gelöscht, ein paar Dinge für mich. Das ist, wo ich fand heraus, über vuex-Klasse, die von Dekoratoren für alle vuex-Mappern.

So, nun anstelle des Schreibens einen neuen getter für einfach Zugriff auf eine Eigenschaft in der Zustand, könnte ich dies tun:

import {
Zustand,
} aus ‘vuex-Klasse”

@Komponente
export class MyComp erstreckt Vue {
@Staat(Staat => Staat.bar) stateBar
}

Entwicklung Erfahrung Mit VS Code

Mit TypeScript, die Kodierung der Erfahrung auf VS-Code ist so viel besser. Es gibt kein zurück und her, um zu überprüfen, welche mutation Typ I deklariert mutation-Arten.ts, da VS-Code können Sie nur erkennen und richtig deuten, wie ich tippe.

Das gleiche gilt für das ändern von Staat Mutationen — mit Typoskript der Redakteur wusste, was meinen Zustand, Struktur aussieht, und schlägt die richtigen Eigenschaften.

Wenn Sie mit VS Code habe ich dringend empfohlen, die Vetur-plugin, denn es bietet Vue tooling und kommt mit anderen Glocken und pfeift, wie syntax-highlighting (das funktioniert gut mit Vue eine einzige Datei Komponenten) und linting direkt aus der box.

Abschließende Gedanken

Genau wie alles andere im JavaScript-ökosystem, Vue + Typoskript hat noch einen langen Weg zu gehen. Zum Beispiel konnte ich nicht verwenden vuelidate weil es nicht Testungen. Aber zum Glück vee-überprüfen, sofern eine Abhilfe, so dass ich nicht haben, gehen den schwierigen Weg, schreiben diese selbst.

Im Fazit, ich fand die Entwicklung Erfahrung viel glatter und VS-Code ist ein völlig anderes Tier, wenn Sie die Arbeit mit Typoskript. Ich weiß nicht wirklich brauchen, zu singen das Lob der Vue — es ist sehr leicht zu Holen und mit dem Bau beginnen und spart Tage versucht, wickeln Sie Ihren Kopf um das Innenleben des Rahmens.

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!