Unser Ziel ist es, die Spa -Entwicklung zu vereinfachen - versenden Sie noch heute Ihr Admin -Dashboard. Der Fokus liegt auf dem Stapel-/Architektur-/Designmuster und nicht auf der Ästhetik. Das Design wird minimal gehalten, um dies einfach zu halten und es einfach zu machen, Ihr eigenes Design zu implementieren.
Wir behandeln auch den Design -Teil - portieren Sie wichtige Admin -Frameworks auf unserem Admin -Dashboard -Starter -Tech. Hier ist eine vollständige Liste (je mehr Sterne, desto mehr Arbeiten machen wir):
Gebaut mit Sufle und Sapper. Rollup baut das Projekt auf. Bereitstellen Sie mit Firebase Hosting, jetzt an, direkt oder direkt auf Ihre Server.
Alles in allem könnten Sie heute Ihr Live -Administrator -Dashboard bereitstellen.
Wie Sie jedoch den Code erhalten, können Sie Abhängigkeiten installieren und das Projekt im Entwicklungsmodus ausführen mit:
cd admin-dashboard-starter
npm install # or yarn
npm run dev
Öffnen Sie Localhost: 3000 und klicken Sie auf.
Wenden Sie sich an sapper.svelte.dev, um den Einstieg zu erhalten.
Sapper erwartet, zwei Verzeichnisse in der Wurzel Ihres Projekts zu finden - src
und static
.
Das SRC-Verzeichnis enthält die Einstiegspunkte für Ihre App- client.js
, server.js
und (optional) einen service-worker.js
-zusammen mit einer template.html
Datei und einem routes
-Verzeichnis.
Dies ist das Herz Ihrer Sapper -App. Es gibt zwei Arten von Routen - Seiten und Serverrouten .
Seiten sind SufleT -Komponenten, die in .svelte
-Dateien geschrieben wurden. Wenn ein Benutzer die Anwendung zum ersten Mal besucht, wird ihm eine serverbereitete Version der betreffenden Route sowie einige JavaScript bedient, die die Seite "hydratiert" und einen clientseitigen Router initialisiert. Von diesem Zeitpunkt an wird das Navigieren auf andere Seiten vollständig auf den Kunden behandelt, um ein schnelles, app-ähnliches Gefühl zu erhalten. (Sapper wird den Code für diese nachfolgenden Seiten vorladen und zwischenspeichern, so dass die Navigation augenblicklich ist.)
Serverrouten sind Module, die in .js
-Dateien geschrieben wurden, die Funktionen der HTTP -Methoden entsprechen. Jede Funktion empfängt Express request
und response
als Argumente sowie eine next
Funktion. Dies ist nützlich, um beispielsweise eine JSON -API zu erstellen.
Es gibt drei einfache Regeln für die Benennung der Dateien, die Ihre Routen definieren:
src/routes/about.svelte
entspricht der /about
Route. Eine Datei namens src/routes/blog/[slug].svelte
entspricht der Route /blog/:slug
params.slug
src/routes/index.svelte
(oder src/routes/index.js
) entspricht dem Stamm Ihrer App. src/routes/about/index.svelte
wird genauso behandelt wie src/routes/about.svelte
./_helpers/datetime
-komponenten mit den von src/routes/_helpers/datetime.js
abhängigen Routen Colocation ColocationDas statische Verzeichnis enthält alle statischen Vermögenswerte, die verfügbar sein sollten. Diese werden mit SIRV serviert.
In Ihrer Datei-jenseitiger Datei-jenseits.js-Datei können Sie diese als files
aus dem generierten Manifest importieren ...
import { files } from '@sapper/service-worker' ;
... damit Sie sie zwischenspeichern können (obwohl Sie dies nicht auswählen können, beispielsweise wenn Sie nicht sehr große Dateien zwischenspeichern möchten).
Sapper verwendet Rollup oder WebPack, um Code-Splitting- und dynamische Importe bereitzustellen sowie Ihre Sument-Komponenten zu kompilieren. Mit WebPack bietet es auch ein heißes Modul -Nachladen. Solange Sie nichts DAFT tun, können Sie die Konfigurationsdateien bearbeiten, um alle Plugins hinzuzufügen, die Sie möchten.
Um eine Produktionsversion Ihrer App zu starten, führen Sie npm run build && npm start
. Dadurch wird das Live -Nachladen deaktiviert und die entsprechenden Bundler -Plugins aktiviert.
Sie können Ihre Anwendung in jeder Umgebung bereitstellen, die den Knoten 8 oder höher unterstützt. Ausführen als Beispiel, um diese Befehle jetzt bereitzustellen, diese Befehle ausführen:
npm install -g now
now
Bei Verwendung von SVVTE-Komponenten, die von NPM installiert sind, wie z. Auf diese Weise kann die Komponente serverseitig gerendert werden und hält Ihre clientseitige App kleiner.
Aus diesem Grund ist es wichtig, dass der Bundler das Paket nicht als externe Abhängigkeit behandelt. Sie können die external
Option unter server
entweder ändern.config.js oder die Option externals
in webpack.config.js oder einfach die Paket an devDependencies
anstelle von dependencies
installieren, die dazu führen Ihre App:
npm install -D @sveltejs/svelte-virtual-list
Bitte seien Sie mit dem DBH -Ausgabe -Tracker laut.