vuejs os template
v0.1.0
| Blueprint -Thema | Windows -Thema | MacOS -Thema |
|---|---|---|
 |  |  |
Dieses Projekt zielt darauf ab, eine interaktive Web -Betriebssystemvorlage für VUE zu erstellen. In der Vorlage sind die erforderlichen Logik für einzelne Fensterkomponenten, Navigationen und App -Gitter enthalten. Benutzer können neue Komponenten (benutzerdefiniert oder auf andere Weise) einfach registrieren.
Laden Sie die neueste Version dieser Seite von dieser Seite herunter
Stellen Sie sicher, dass Sie Vue.js installiert haben
Offizielle Dokumentation von Vue
Benennen Sie den Ordner in vuejs-os-template
CD in den Projektordner und installieren Sie Pakete + Abhängigkeiten
$ cd vuejs-os-template && npm install$ npm run serveDurch die Registrierung eines Fensters mit der Slots-Methode können Sie schnell auf die vorgefertigte Fenstervorlage zugreifen. Diese Methode eignet sich am besten für Benutzer, die keine Änderung des Stylings oder Layouts des Fensters selbst benötigen.
Gehen Sie zu /src/store/index.js
Registrieren Sie ein neues Fenster, indem Sie den folgenden Ausschnitt innerhalb des Windows -State -Arrays einfügen
{
windowId : "UniqueWindowID" ,
windowState : "close" ,
displayName : "Unique Window" ,
windowComponent : 'window' ,
windowContent : 'Placeholder' ,
windowContentPadding : {
top : null ,
right : null ,
bottom : null ,
left : null
} ,
position : "absolute" ,
positionX : "10vw" ,
positionY : "10vh" ,
iconImage : "placeholder.png" ,
altText : "Placeholder Icon" ,
fullscreen : false
} ,windowId: "MyNewWindow" displayName: "New Window"/src/components/views " und ersetzen Sie 'WindowContent' durch den Namen der neuen Inhaltskomponente. windowContent: "MyNewWindowContent"/src/components/views/mynewwindowcontent.vue
< template >
< p > this is my new window's content! </ p >
</ template >/src/App.vue , um die neuen Komponenten im Abschnitt <Script> zu importieren und zu registrieren. import MyNewWindowContent from './components/views/MyNewWindowContent' components: {
... ,
MyNewWindowContent
}Die Registrierung eines benutzerdefinierten Fensters wird auch relativ einfach gemacht, da jedes Fenster ein dedizierter Objektstatus mit dem vorhandenen Fenster verfolgt. Möglicherweise möchten Sie ein benutzerdefiniertes Fenster registrieren, wenn das Layout oder das Styling des Fensters selbst geändert werden muss (dh Entfernen oder Zugabe von Schaltflächen in der oberen Stange des Fensters).
Gehen Sie zu /src/store/index.js
Registrieren Sie ein neues Fenster, indem Sie den folgenden Ausschnitt innerhalb des Windows -State -Arrays einfügen
{
windowId : "UniqueWindowID" ,
windowState : "close" ,
displayName : "Unique Window" ,
windowComponent : 'window' ,
windowContent : 'Placeholder' ,
windowContentPadding : {
top : null ,
right : null ,
bottom : null ,
left : null
} ,
position : "absolute" ,
positionX : "10vw" ,
positionY : "10vh" ,
iconImage : "placeholder.png" ,
altText : "Placeholder Icon" ,
fullscreen : false
} ,windowId: "MyCustomWindow" displayName: "Custom Window" windowComponent: 'SpecialWindow'
Erstellen Sie eine neue Fensterkomponente mit dem Namen SpecialWindow.vue unter /src/components/template und kopieren Sie den Inhalt des Fensters.vue in diese neue Datei .
Für Demonstrationszwecke ändern wir einfach den Hintergrund der "Top-Bar" des Fensters und fügen einige Inhalte hinzu, die den Slot-Abschnitt ersetzen.
Fügen Sie diesen CSS -Snippet in den Stilbereich ein.
. top-bar {
background-color : green !important ;
}Ersetzen Sie die Schlitzetiketten durch diesen Snippet von HTML.
< p > This is my new custom window </ p >/src/App.vue , um die neuen Komponenten im Abschnitt <Script> zu importieren und zu registrieren. import SpecialWindow from './components/template/SpecialWindow' components: {
... ,
SpecialWindow
}In der Vorlage sind drei verschiedene Themen enthalten, das Standard -Blueprint -Thema, ein MacOS -Thema und ein Windows -Thema. Das Umschalten zwischen Themen ist relativ einfach, aber bestimmte Themen können möglicherweise geringfügig angepasst werden.
/src/App.vue , importieren Sie die Blueprint Navi -Variante. import Navbar from './components/blueprint/Navbar' @import './assets/css/blueprint/app.css' ;
@import './assets/css/blueprint/window.css' ;
@import './assets/css/blueprint/appgrid.css' ;/src/App.vue unter dem Skriptabschnitt importieren Sie die Windows Navbar -Variante. import Navbar from './components/windows/Navbar' @import './assets/css/windows/app.css' ;
@import './assets/css/windows/window.css' ;
@import './assets/css/windows/appgrid.css' ;/src/App.vue unter dem Abschnitt Skript die MacOS Navbar -Variante und die MacOS -Top -Navigh . import Navbar from './components/macos/Navbar'
import TopNavbar from './components/macos/TopNavbar.vue'components: {
... ,
TopNavbar
} `` `
3. Under the style section of App.vue, import the MacOS CSS variant.
` `` css
@ import './assets/css/macos/app.css' ;
@ import './assets/css/macos/window.css' ;
@ import './assets/css/macos/appgrid.css' ; | Name | Beschreibung | Typ |
|---|---|---|
| Fensterid | Eindeutige ID, um ein Fenster zu identifizieren | Saite |
| Fensterstaat | Trackt Windows öffnen, schließen oder minimiert den Zustand | Saite |
| Anzeigename | Beschriftung für das Fenster im App -Gitter- und Fenster -Header -Titel | Saite |
| Fensterkomponent | Die eigene Benutzeroberfläche des Windows kann geändert werden, um ein benutzerdefiniertes Fenster zu verwenden | Saite |
| Fensterkontent | Die Inhaltskomponente des Tracks -Fensters wird unter Slots eingefügt, wenn Sie das Standardfenster verwenden, siehe Registrierung von Fenstern mit Slots -Abschnitt | Saite |
| Fensterkontentpadding | Legt die Polsterung des Inhalts im Fenster fest | String oder Null |
| Position | Legt die CSS -Position des Fensters fest | Saite |
| Positionx | Legt die erste X -Verschiebung des Fensters fest | Saite |
| Position | Legt eine intiale Y -Verschiebung des Fensters fest | Saite |
| Ikonimage | Name des Symbolbildes des Fensters, Symbole sollten in /assets/icons/ | Saite |
| Alttext | Alternativer Text von Icon | Saite |
| Vollbild | Verfolgt, ob ein Fenster in Vollbild ist oder nicht | Boolean |
/assets/css/ , mach wild damit!
