template-vuejs

Boilerplate für eine Vue-3-App mit Vite, TypeScript, Vue Router, Pinia, ESLint, Prettier und Vitest. Als Paketmanager wird ausschließlich pnpm verwendet.

Voraussetzungen

• Node.js ^22.18.0 oder >=24.12.0; empfohlen ist Node.js 24 LTS.
• pnpm 11.22.0. Die Version ist über das Feld packageManager in package.json festgelegt und wird im Devcontainer über Corepack bereitgestellt.

Initialisierung mit VS Code Devcontainer

1. Ein neues Repository aus diesem Template erstellen.
2. Das Projekt in VS Code öffnen und „Reopen in Container“ ausführen.
3. Der Devcontainer installiert die Abhängigkeiten automatisch mit pnpm install --frozen-lockfile.
4. Projektdaten anpassen und den Entwicklungsserver starten:

pnpm pkg set name=my-vue-app
pnpm pkg set version=0.1.0
pnpm dev

Die Anwendung ist standardmäßig über Port 5173 erreichbar.

Initialisierung ohne Devcontainer

Corepack aktivieren, die im Projekt festgelegte pnpm-Version installieren und die Abhängigkeiten installieren:

corepack enable
corepack install
pnpm install --frozen-lockfile
pnpm dev

Verifikation

pnpm type-check
pnpm lint
pnpm test:unit:run
pnpm build
pnpm format:check

Typische Anpassungen nach dem Kopieren

• package.json: Projektname, Version, Beschreibung, Repository und Lizenz
• index.html: Titel, Beschreibung und Sprache
• public/manifest.json: App-Name, Farben, Icons und Start-URL
• src/home/views/Main.vue: Startansicht ersetzen
• .devcontainer/devcontainer.json: Name und Ports bei Bedarf anpassen
• vite.config.ts: server.allowedHosts an die eigene Entwicklungsumgebung anpassen