sakai vue cli

Sakai Admin-Vorlage für Vue

Live-Vorschau

Besuchen Sie die Website von Sakai Vue für eine Live-Vorschau.

Erste Schritte

Sakai ist eine Anwendungsvorlage für Vue, die auf der Vue-CLI basiert und sofort einsatzbereite Standardtools für Vue-Projekte bereitstellt. Klonen Sie zunächst dieses Repository von GitHub und installieren Sie die Abhängigkeiten mit npm oder Yarn.

 npm install

oder

 yarn

Der nächste Schritt besteht darin, die Anwendung mithilfe des Serve-Skripts auszuführen und zu http://localhost:8080/ zu navigieren, um die Anwendung anzuzeigen. Jetzt können Sie mit der Entwicklung Ihrer Anwendung mithilfe der Sakai-Vorlage beginnen.

 npm run serve

Vue CLI-Skripte

Die folgenden Befehle werden von create-app-app abgeleitet.

 "npm run serve": Starts the development server
"npm run build": Builds the application for deployment.
"npm run lint": Executes the lint checks.
"npm run test:unit": Runs the tests.

Struktur

Sakai besteht aus 2 Hauptteilen; das Anwendungslayout und die Ressourcen. App.vue im Ordner „src“ ist die Hauptkomponente, die die Vorlage für das Basislayout enthält, während erforderliche Ressourcen wie die SASS-Struktur für das Layout im Ordner „src/assets/“ abgelegt werden.

Layoutkomponenten

Das Hauptlayout ist die Vorlage von App.vue . Es ist in einige untergeordnete Komponenten wie die obere Leiste, das Menü und die Fußzeile unterteilt. Hier ist eine Vorlage der App.vue -Komponente, die die Logik wie Menüstatus, Layoutmodi usw. implementiert.

Speisekarte

Das Menü ist eine separate Komponente, die in der Datei AppMenu.vue basierend auf der PrimeVue MenuModel-API definiert ist. Um die Menüelemente zu definieren, navigieren Sie zum Datenabschnitt der App.vue- Datei und definieren Sie Ihr eigenes Modell als verschachtelte Struktur mithilfe der Menüeigenschaft .

Abhängigkeiten

Abhängigkeiten von Sakai sind unten aufgeführt und müssen zu package.json hinzugefügt werden.

{
    "primevue" : " ~3.12.2 " ,
    "primeicons" : " ~5.0.0 " ,
    "primeflex" : " ~3.1.2 " ,
}

PrimeVue-Theme

Sakai verwendet die kostenlosen Saga-, Arya- und Vela-Themes, die in PrimeVue verteilt werden. Es kann jedoch auch mit jedem PrimeVue-Theme wie Material, Tailwind und Bootstrap verwendet werden, da die Layoutfarben über CSS-Variablen vom verwendeten Theme abgeleitet werden.

SASS-Variablen

Wenn Sie die Layoutvariablen anpassen möchten, öffnen Sie die Datei _variables.scss im Ordner src/layout. Die Liste ist ziemlich kurz, da die meisten Variablen vom verwendeten PrimeVue-Theme abgeleitet sind.

src/assets/_variables.scss

$fontSize : 1rem;
$b or derRadius : 12px;
$transitionDuration : .2s;