Jetzt versuchen wir erneut, pnpm dev auszuführen. Und wenn Sie zu http://localhost:5173/blog/6 gehen, sollten Sie Folgendes erhalten.

\\\"Vue

Erstaunlich, oder? Ich hoffe, dieser kurze Blog hat Ihnen auf Ihrer VueJS-Reise geholfen. Haben Sie einen guten Tag.

Wenn Ihnen dieser Artikel gefällt und Sie Ihre Unterstützung zeigen möchten, können Sie dies ganz einfach tun, indem Sie mir einen Kaffee spendieren. Ihr Beitrag wird sehr geschätzt!


Wenn Ihnen dieser Artikel gefällt und Sie Ihre Unterstützung zeigen möchten, können Sie dies ganz einfach tun, indem Sie mir einen Kaffee spendieren. Ihr Beitrag wird sehr geschätzt!

\\\"Vue

","image":"http://www.luping.net","datePublished":"2024-07-30T09:26:03+08:00","dateModified":"2024-07-30T09:26:03+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Vue uto Routing nach Dateistruktur

Vue uto Routing nach Dateistruktur

Veröffentlicht am 30.07.2024
Durchsuche:777

Eines meiner Probleme bei der Arbeit mit VueJS ist das Erstellen von Routen, insbesondere wenn das Projekt größer wird und es zu einem Problem wird, Ihre route.ts oder route.js zu verwalten. Ich erinnere mich noch an ein Projekt, das zu viele Seiten hat, sodass Sie Ihre Routen aktualisieren müssen, wenn Sie eine neue Seite erstellen, und Sie müssen Ihre Routendatei jedes Mal aktualisieren, wenn Sie eine Seite entfernen, nur um zu vermeiden, dass Fehler angezeigt werden.

Also begann ich zu suchen, wie ich das automatische Routing dateibasiert gestalten könnte. Der Versuch, in Google zu suchen, war schwer zu finden, da die meisten Ergebnisse, die ich im Internet gefunden habe, sich hauptsächlich auf Webpack und Version 2 beziehen. Also musste ich es in der Vue Github-Repo-Diskussion fragen und bekam eine Antwort.

Wir stellen vor: Unplugin Vue Router. Dies ist ein typisiertes, dateibasiertes Routing für Vue 3. Und es ist tatsächlich einfach einzurichten. Dies ist experimentell, wie sie in ihrer Github-Readme-Datei angegeben haben.

Erstens erstellen wir unser Vue-Projekt von Grund auf. Wie wir alle wissen, können wir durch Ausführen dieses Befehls ein Projekt erstellen und dann einige Optionen beantworten. Wenn Sie nicht wissen, wie es geht, können Sie den Schnellstart auf der VueJs-Seite überprüfen.

pnpm create vue@latest

In diesem Beispiel habe ich das Projekt also so erstellt.

pnpm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-auto-route
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in D:\Projects\Testing\vue-auto-route...

Done. Now run:

  cd vue-auto-route
  pnpm install
  pnpm dev

Wir werden uns für Select TypeScript entscheiden. Ich habe den Router auch aktiviert, sodass er automatisch Seiten für mich neu generiert.

Können Sie zu unserem Projekt wechseln und die Abhängigkeiten installieren. Abhängig von Ihrem verwendeten Paketmanager können Sie ihn also verwenden. Für mich selbst verwende ich das PNPM, das mir langsam gefällt. Nachdem unser Projekt nun erstellt wurde, mussten wir nun den Unplugin-Vue-Router installieren.

pnpm add -D unplugin-vue-router

Jetzt können wir vite.config.ts aktualisieren. Stellen Sie sicher, dass Sie das Plugin in Index 0 einfügen.

import { fileURLToPath, URL } from "node:url";
import VueRouter from "unplugin-vue-router/vite";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        VueRouter({
            /* options */
        }),
        // ⚠️ Vue must be placed after VueRouter()
        vue(),
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },

});

Als nächstes aktualisieren wir env.d.ts, damit unser Editor die Typen für unser Paket leicht finden kann.

/// 
/// 

Dann aktualisieren wir unsere Router index.ts in src/router/index.ts.

import { createRouter, createWebHistory } from "vue-router";
import { routes, handleHotUpdate } from "vue-router/auto-routes";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes,
});

if (import.meta.hot) {
    handleHotUpdate(router);
}

export default router;

Da nun alles erledigt ist, können wir jetzt das Verzeichnis src/pages erstellen. In diesem Ordner oder Verzeichnis fügen wir unsere Seiten hinzu und es werden automatisch Routen basierend auf der Dateistruktur erstellt. Wenn Sie mit Nuxt vertraut sind, ist es in etwa so.

Erstellen wir eine About-Seite in src\pages\about.vue.


Lass uns unsere Homepage erstellen, indem wir den Index in src\pages\index.vue verwenden.


Dann können wir unsere Vue-App ausführen, indem wir das Dev-Skript ausführen. pnpm-Entwickler. Wenn Sie auf „Startseite“ klicken, werden Sie zur Startseite weitergeleitet. Wenn Sie auf „Über“ klicken, werden Sie zur „Über“-Seite weitergeleitet.

Jetzt ist alles für Sie eingerichtet. Wenn Sie mit der Ordnerstruktur des Routers nicht vertraut sind. Sie können dieses Dokument unter https://uvr.esm.is/guide/file-based-routing.html überprüfen.

Versuchen wir, eine Slug-Komponente wie src/pages/blog/[id].vue mit diesem Inhalt hinzuzufügen.



Jetzt versuchen wir erneut, pnpm dev auszuführen. Und wenn Sie zu http://localhost:5173/blog/6 gehen, sollten Sie Folgendes erhalten.

Vue uto Routing By File Structure

Erstaunlich, oder? Ich hoffe, dieser kurze Blog hat Ihnen auf Ihrer VueJS-Reise geholfen. Haben Sie einen guten Tag.

Wenn Ihnen dieser Artikel gefällt und Sie Ihre Unterstützung zeigen möchten, können Sie dies ganz einfach tun, indem Sie mir einen Kaffee spendieren. Ihr Beitrag wird sehr geschätzt!


Wenn Ihnen dieser Artikel gefällt und Sie Ihre Unterstützung zeigen möchten, können Sie dies ganz einfach tun, indem Sie mir einen Kaffee spendieren. Ihr Beitrag wird sehr geschätzt!

Vue uto Routing By File Structure

Freigabeerklärung Dieser Artikel ist abgedruckt unter: https://dev.to/jenueldev/vue-3-auto-routing-by-file-structure-2hac?1 Bei Verstößen wenden Sie sich bitte an [email protected], um ihn zu löschen
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3