Skip to content

Commit

Permalink
seo
Browse files Browse the repository at this point in the history
  • Loading branch information
tidusIO committed Jan 3, 2025
1 parent 40a4b3f commit 2a3efc6
Show file tree
Hide file tree
Showing 6 changed files with 17 additions and 17 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -324,7 +324,7 @@ Wie genau Vue intern funktioniert und _was_ letztlich von unseren Single-File-Co

Bei der Arbeit mit Vue gehören neben den kennengelernten Werkzeugen unbedingt auch die Vue DevTools. Es handelt sich dabei um ein Add-On für den Chrome- oder Firefox-Browser, welches die Entwicklertools um einen zusätzlichen Bereich für Vue erweitert. Dieser stellt uns viele Informationen über die Anwendung und die verwendeten Vue-Komponenten bereit.

* [Vue DevTools für Chrome](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg){:target="_blank"}
* [Vue DevTools für Chrome](https://chromewebstore.google.com/detail/vuejs-devtools-beta/ljjemllljcmogpfapbkkighbhhppjdbg){:target="_blank"}
* [Vue DevTools für Firefox](https://github.com/vuejs/vue-devtools/releases/download/v6.0.0-beta.2/vuejs_devtools_beta-6.0.0.2-an+fx.xpi){:target="_blank"}

Nach der Installation und einem Neustart des Browsers können wir über die Tastenkombination [**Cmd+Option+I**] (Mac) oder [**Strg+Shift+I**] (Windows) die Entwicklertools öffnen. In der Liste der Reiter suchen wir den Eintrag **Vue** und klicken diesen an:
Expand Down Expand Up @@ -703,7 +703,7 @@ export default {
Die `setup`-Methode ist auf ein absolutes Minimum reduziert. Die im Template benötigten Eigenschaften werden uns durch die ausgelagerten Funktionen zur Verfügung gestellt.
Zurückgeben müssen wir diese allerdings weiterhin mittels `return` in der Komponente selbst.

Mit [Destructuring](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung){:target="_blank"} werden die Rückgaben der `composition functions` in ihre einzelnen Bestandteile zerlegt und in die angegebenen Variablen geschrieben.
Mit [Destructuring](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment){:target="_blank"} werden die Rückgaben der `composition functions` in ihre einzelnen Bestandteile zerlegt und in die angegebenen Variablen geschrieben.
Wie auch bei der Übergabe von `sum` an `useApi` würden wir hierbei ohne das Konzept der `refs` und `Reactive References` die gewünschte Funktionalität der Reaktivität nicht abbilden können und die Referenzen verlieren.

Durch dieses Konzept der Zusammensetzung von Komponenten erhalten wir eine wesentlich bessere Strukturierung und Wartbarkeit. Die Möglichkeit, Komponenten nun endlich nach Logik strukturieren zu können, ist erst mit der Composition API in diesem Ausmaß möglich.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ _Evan You // Keynote: Live Free Online Announcement // Vuejs Global Online_
die aber voraussichtlich erst mit Version 3.1 final sind.
`<script setup>` solltet Ihr Euch näher ansehen, da sich hiermit in den Composition API inside Single File Components ein Kompilierungsschritt einbauen lässt.
Außerdem wurde die Beta-Version der neuen Vue Devtools veröffentlicht.
Seit dem 2. September findet Ihr hierzu auch die Devtools Erweiterung im [Chrome Web Store](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg){:target="_blank"}.
Seit dem 2. September findet Ihr hierzu auch die Devtools Erweiterung im [Chrome Web Store](https://chromewebstore.google.com/detail/vuejs-devtools-beta/ljjemllljcmogpfapbkkighbhhppjdbg){:target="_blank"}.

Auf Wunsch vieler Entwickler soll auch bald wieder der Internet Explorer 11 (IE11) in Vue.js 3.0 unterstützt werden.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Wir sind jedenfalls gespannt, wie sich Vite weiterentwickeln wird und nutzen es

## Weitere Informationen

- Vite Homepage: [https://vitejs.dev/](https://vitejs.dev/){:target="_blank"}
- Vite Homepage: [https://vite.dev/](https://vite.dev/){:target="_blank"}
- Vite auf Github: [https://github.com/vitejs/vite](https://github.com/vitejs/vite){:target="_blank"}
- Offizielle Plugins: [https://vitejs.dev/plugins/#vitejs-plugin-vue](https://vitejs.dev/plugins/#vitejs-plugin-vue){:target="_blank"}
- Offizielle Plugins: [https://vite.dev/plugins/#vitejs-plugin-vue](https://vite.dev/plugins/#vitejs-plugin-vue){:target="_blank"}
- Awesome Vite: [https://github.com/vitejs/awesome-vite](https://github.com/vitejs/awesome-vite){:target="_blank"}
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ button {
</style>
```

Das Beispiel kann im [SFC Playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgY29sb3IgPSByZWYoJ3JlZCcpXG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuICA8YnV0dG9uIEBjbGljaz1cImNvbG9yID0gY29sb3IgPT09ICdyZWQnID8gJ2dyZWVuJyA6ICdyZWQnXCI+XG4gICAgQ29sb3IgaXM6IHt7IGNvbG9yIH19XG4gIDwvYnV0dG9uPlxuPC90ZW1wbGF0ZT5cblxuPHN0eWxlIHNjb3BlZD5cbmJ1dHRvbiB7XG4gIGNvbG9yOiB2LWJpbmQoY29sb3IpO1xufVxuPC9zdHlsZT4ifQ==){:target="_blank"} auch direkt live ausprobiert werden.
Das Beispiel kann im [Playground](https://play.vuejs.org/#eNp9Uk1TwjAQ/Ss7uRRmEA56whY/GA56UEc95gLpUgNpkklSxOn0v7tJATk4nNp9+97L201a9mDteNcgm7LcCydtAI+hsTOuZW2NC9CCwzV0sHamhoyoGddcC6N9AGGUcVBExiBzWGZDrvNJ70MOVASsrVoGpAogXzUhGA33QkmxLTg76g/fooDkAneQVQ5RZzDtEc6SAcA8MaWfQtseZF2XvCe9OfHyydmpVPrwoxC8MBZLQg4h2qhKDlPYXa2kLgepGt5yTY40RpTN2IgFkuq1rMYbbzQtKilj+NpKhe7VBknb4Iwy9SE5Wyplvp8TFlyDoyMuvlBs/8E3fh8xzt4cenQ75OzUC0tXYejbi48X3NP/qVmbslHEvtB8R29UEzP2tMdGlxT7jJfSPqXrlrr69It9QO2PQ8WgkdklPmf0BOYXRv+Lez2+STraJ+t+AaSrzWM=){:target="_blank"} auch direkt live ausprobiert werden.

## Web Components

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ Vite erkennt Modul-Importe in Sourcedateien und analyisiert diese anhand des Pfa

Vor allem beim Kaltstart eines Dev-Servers muss ein Bundler zuerst alle Abhängigkeiten durchforsten und aufbauen. Vite verkürzt die Startzeit des Dev-Servers, indem es die Module in zwei Kategorien separiert: Abhängigkeiten (Dependencies) und Sourcecode.

Abhängigkeiten – wie z. B. Komponentenbibliotheken – ändern sich oft nicht in der Entwicklung, sind aber aufwändig in der Bereitstellung. Diese können einfach mit dem bereits genannten `esbuild` vorgebündelt werden, um wichtige Zeit zu sparen: [Pre-Bundling](https://vitejs.dev/guide/dep-pre-bundling.html#customizing-the-behavior){:target="_blank"}.
Abhängigkeiten – wie z. B. Komponentenbibliotheken – ändern sich oft nicht in der Entwicklung, sind aber aufwändig in der Bereitstellung. Diese können einfach mit dem bereits genannten `esbuild` vorgebündelt werden, um wichtige Zeit zu sparen: [Pre-Bundling](https://vite.dev/guide/dep-pre-bundling.html){:target="_blank"}.

**Das Besondere**: Das Bundling geschieht anschließend mit Rollup. Warum hierfür nicht auch `esbuild` genommen wurde? Leider sind einige der wichtigen Funktionen, die für die Bündelung von Anwendungen benötigt werden, noch nicht ausgereift – insbesondere das Code-Splitting und die CSS-Handhabung. Zusätzlich fand Evan You, dass Rollup bessere Zukunftsaussichten hat, als z. B. webpack. So verwendet Rollup bereits das neue standardisierte Format für Code-Module: [ES Modules](https://rollupjs.org/guide/en/#es-module-syntax){:target="_blank"}.

Expand All @@ -33,7 +33,7 @@ Wichtig: Um Zeit zu sparen, werden diese Optimierungen von Vite nur bei einer ve

Der neue Aufbau eines Bundles ist zeitaufwändig und ressourcen-intensiv. Zudem kann das Neuladen der Seite aktuelle Parameter verändern. Aus diesem Grund unterstützt auch Vite das Hot Module Replacement (HMR). Dadurch lässt sich ein Modul während des Anwendungsvorgangs neu laden, ohne die Seite zu beeinflussen.

Vite bietet eine [HMR-API](https://vitejs.dev/guide/api-hmr.html){:target="_blank"} über native ES-Module. Frameworks mit HMR-Funktionen können die API nutzen, um einzelne Module anzupassen, ohne die Seite erneut laden zu müssen. Vite bietet HMR-Integrationen für [Vue Single File Components](https://github.com/vitejs/vite/tree/main/packages/plugin-vue){:target="_blank"} und [React Fast Refresh](https://github.com/vitejs/vite/tree/main/packages/plugin-react-refresh){:target="_blank"} an.
Vite bietet eine [HMR-API](https://vite.dev/guide/api-hmr.html){:target="_blank"} über native ES-Module. Frameworks mit HMR-Funktionen können die API nutzen, um einzelne Module anzupassen, ohne die Seite erneut laden zu müssen. Vite bietet HMR-Integrationen für [Vue Single File Components](https://github.com/vitejs/vite/tree/main/packages/plugin-vue){:target="_blank"} und [React Fast Refresh](https://github.com/vitejs/vite/tree/main/packages/plugin-react-refresh){:target="_blank"} an.

**Gut zu wissen**: Ihr müsst HMR nicht manuell einrichten, wenn Ihr eine App über `create vite` erstellt, da diese bereits vorkonfiguriert sind.

Expand Down Expand Up @@ -75,7 +75,7 @@ Beim Importieren von `.css`-Dateien wird der Inhalt über das `<style>`-Tag mit

Vite ist vorkonfiguriert, um CSS `@import` Inlining über `postcss-import` zu unterstützen. Konfigurierte Vite-Aliase werden dabei auch für CSS `@import`-Anweisungen akzeptiert. Zusätzlich werden alle CSS `url()`-Referenzen automatisch angepasst, um zu gewährleisten, dass sie stets korrekt sind.

**Gut zu wissen**: `@import`-Aliase und URL-Anpassungen werden auch für Sass- und Less-Dateien unterstützt (siehe [CSS-Präprozessoren](https://vitejs.dev/guide/features.html#css-pre-processors){:target="_blank"}).
**Gut zu wissen**: `@import`-Aliase und URL-Anpassungen werden auch für Sass- und Less-Dateien unterstützt (siehe [CSS-Präprozessoren](https://vite.dev/guide/features.html#css-pre-processors){:target="_blank"}).

## Importieren von statischen Assets

Expand Down Expand Up @@ -108,7 +108,7 @@ import json from './example.json';
import { field } from './example.json';
```

Mehr dazu findet Ihr in der Dokumentation auch im Bereich [Static Asset Handling](https://vitejs.dev/guide/assets.html){:target="_blank"}.
Mehr dazu findet Ihr in der Dokumentation auch im Bereich [Static Asset Handling](https://vite.dev/guide/assets.html){:target="_blank"}.

## Glob Import und WebAssembly

Expand Down Expand Up @@ -221,13 +221,13 @@ In realen Anwendungen generiert Rollup oft „allgemeine" Chunks, welche von zwe

Deshalb schreibt Vite diese Importketten automatisch um, so dass, gleichzeitig zum angefragten Chunk weitere benötigte Chunks geladen werden können. Die Optimierung durch Vite verfolgt alle direkten Importe, um die störenden Roundtrips zu beseitigen, ganz gleich, wie tiefgehend die Importe dabei sind.

Wir hoffen, dass Euch unsere kleine Vite-Übersicht gefallen hat und sich vielleicht einige Eurer Fragen geklärt haben. Falls Ihr mehr über die Möglichkeiten von Vite lernen möchtet, empfehlen wir Euch einen Blick auf die hervorragende [Dokumentation](https://vitejs.dev/){:target="_blank"}. Hier können wir noch mal intensiv auf Eure Projekte und Fragen eingehen.
Wir hoffen, dass Euch unsere kleine Vite-Übersicht gefallen hat und sich vielleicht einige Eurer Fragen geklärt haben. Falls Ihr mehr über die Möglichkeiten von Vite lernen möchtet, empfehlen wir Euch einen Blick auf die hervorragende [Dokumentation](https://vite.dev/){:target="_blank"}. Hier können wir noch mal intensiv auf Eure Projekte und Fragen eingehen.

Bis dahin wünschen wir Euch schon mal viel Spaß und viel Erfolg mit Vite!

## Weitere Informationen

- Vite Homepage: [https://vitejs.dev/](https://vitejs.dev/){:target="_blank"}
- Vite Homepage: [https://vite.dev/](https://vite.dev/){:target="_blank"}
- Vite auf Github: [https://github.com/vitejs/vite](https://github.com/vitejs/vite){:target="_blank"}
- Offizielle Plugins: [https://vitejs.dev/plugins/#vitejs-plugin-vue](https://vitejs.dev/plugins/#vitejs-plugin-vue){:target="_blank"}
- Offizielle Plugins: [https://vite.dev/plugins/#vitejs-plugin-vue](https://vite.dev/plugins/#vitejs-plugin-vue){:target="_blank"}
- Awesome Vite: [https://github.com/vitejs/awesome-vite](https://github.com/vitejs/awesome-vite){:target="_blank"}
8 changes: 4 additions & 4 deletions _posts/2021-10-24-nuxt-3-ist-da/2021-10-24-nuxt-3-ist-da.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Nuxt Nitro als neue Server-Engine sorgt für einen schnelleren Kaltstart und erz

Nuxt Nitro ist aufgrund einer automatischen Plattform-Detektion und der Polyfill-Generierung völlig plattformunabhängig.

Ein wichtiger Schritt, da viele Entwickler bereits die [JAMStack](https://jamstack.org/){:target="_blank"} Architektur für schnelle und dynamische Webseiten oder CDNs (Content Delivery Networks) einsetzen. Auch neue Umgebungen wie Web Worker, um Skripte in einem Hintergrundthread getrennt vom Haupthread auszuführen, oder [Deno](https://deno.land/){:target="_blank"} (die Node.js Alternative) sorgen bereits für mehr Performance im Web.
Ein wichtiger Schritt, da viele Entwickler bereits die [JAMStack](https://jamstack.org/){:target="_blank"} Architektur für schnelle und dynamische Webseiten oder CDNs (Content Delivery Networks) einsetzen. Auch neue Umgebungen wie Web Worker, um Skripte in einem Hintergrundthread getrennt vom Haupthread auszuführen, oder [Deno](https://deno.com/){:target="_blank"} (die Node.js Alternative) sorgen bereits für mehr Performance im Web.

### Darf‘s ein bisschen mehr Performance sein? Zum Beispiel 100-mal mehr?

Expand All @@ -44,7 +44,7 @@ Eine weitere Möglichkeit durch die neue Engine ist die Mischung von Server-side

Migrationen auf eine neue Version sind in der Regel immer langwierig und aufwendig. Das Hauptframework sowie alle Pakete und Module müssen migriert und als neue Version bereitgestellt werden. Auch hier hat das Nuxt.js Entwickler-Team gute Arbeit geleistet und ein Tool entwickelt, das den Umstieg erleichtern soll.

Künftig werden Upgrades in Nuxt.js Umgebungen sehr viel einfacher – mittels Nuxt.js Bridge. Natürlich funktionieren ältere Plug-ins und Module weiterhin, da die [Konfigurationsdatei](https://nuxtjs.org/docs/directory-structure/nuxt-config#nuxtconfigjs){:target="_blank"} `nuxt.config.js` kompatibel mit Nuxt 2 bleibt. Auch mehrere Nuxt.js 3 APIs blieben unverändert, um ein progressives Upgrade zu erleichtern.
Künftig werden Upgrades in Nuxt.js Umgebungen sehr viel einfacher – mittels Nuxt.js Bridge. Natürlich funktionieren ältere Plug-ins und Module weiterhin, da die [Konfigurationsdatei](https://v2.nuxt.com/docs/directory-structure/nuxt-config/#nuxtconfigjs){:target="_blank"} `nuxt.config.js` kompatibel mit Nuxt 2 bleibt. Auch mehrere Nuxt.js 3 APIs blieben unverändert, um ein progressives Upgrade zu erleichtern.

Wer in einem Nuxt.js 2 Projekt von den Vorzügen der neuen Version profitieren möchte, kann das ebenso. Schließlich werden viele Neuerungen aus Nuxt.js 3 auch auf Nuxt.js 2 übertragen. Dazu gehören:

Expand All @@ -57,7 +57,7 @@ Wer in einem Nuxt.js 2 Projekt von den Vorzügen der neuen Version profitieren m

### Optimierte Datenabfrage mit fetch und suspense

Datenabfragen konnten in Nuxt.js Anwendungen bisher sehr kompliziert sein. So musste man vor Version 2.12, um Daten serverseitig zu rendern, die `asyncData` Funktion verwenden. Doch diese stand nur auf Seitenebene zur Verfügung. Der Grund: Serverseitiges Rendering auf Komponentenebene war nicht verfügbar. Deshalb musste man den Umweg gehen, indem man die Daten als `props` an die Komponenten übergab. Eine weitere Möglichkeit war die `fetch` Funktion, die aber nur dazu diente, den Store zu füllen, bevor die Seite gerendert wurde. Mit [Nuxt 2.12](https://nuxtjs.org/docs/features/data-fetching/){:target="_blank"} wurde die `fetch` Funktion zwar stark erweitert, was wiederum die Leistung von Nuxt.js verbesserte, aber es gab immer noch ein Problem.
Datenabfragen konnten in Nuxt.js Anwendungen bisher sehr kompliziert sein. So musste man vor Version 2.12, um Daten serverseitig zu rendern, die `asyncData` Funktion verwenden. Doch diese stand nur auf Seitenebene zur Verfügung. Der Grund: Serverseitiges Rendering auf Komponentenebene war nicht verfügbar. Deshalb musste man den Umweg gehen, indem man die Daten als `props` an die Komponenten übergab. Eine weitere Möglichkeit war die `fetch` Funktion, die aber nur dazu diente, den Store zu füllen, bevor die Seite gerendert wurde. Mit [Nuxt 2.12](https://v2.nuxt.com/docs/features/data-fetching/){:target="_blank"} wurde die `fetch` Funktion zwar stark erweitert, was wiederum die Leistung von Nuxt.js verbesserte, aber es gab immer noch ein Problem.

Durch die Überarbeitung gab es viele unterschiedliche Konfigurationsmöglichkeiten, wie man Daten abfragen konnte. Auch die starken Unterschiede in den Nutzungsmöglichkeiten zwischen `fetch` und `asyncData` sorgen weiterhin für Verwirrung bei den Entwicklern.

Expand Down Expand Up @@ -89,7 +89,7 @@ Was haltet ihr von dem Release? Fehlt euch etwas? Werdet ihr in Zukunft eure Vue
- Nuxt Nitro: https://v3.nuxtjs.org/concepts/server-engine
- Nuxt 3 Bridge: https://v3.nuxtjs.org/getting-started/bridge/
- Vue 3: https://vuejs.org/
- Vite: https://vitejs.dev/
- Vite: https://vite.dev/
- Github: https://github.com/nuxt/framework
- Hilfe & Support: https://v3.nuxtjs.org/community/getting-help/
- Bugs melden: https://v3.nuxtjs.org/community/reporting-bugs/
Expand Down

0 comments on commit 2a3efc6

Please sign in to comment.