vuejs os template
v0.1.0
| Thème du plan | Thème Windows | Thème macOS |
|---|---|---|
 |  |  |
Ce projet vise à créer un modèle de système d'exploitation Web interactif pour Vue. Le modèle est inclus dans la logique nécessaire pour les composants de fenêtre individuels, les barres de navigation et les grilles d'application. Les utilisateurs peuvent facilement enregistrer de nouveaux composants (personnalisés ou autrement).
Téléchargez la dernière version de la Sidebae de cette page
Assurez-vous que Vue.js a installé
Documentation officielle de Vue
Renommer le dossier de vuejs-os-template
CD dans le dossier du projet et packages d'installation + dépendances
$ cd vuejs-os-template && npm install$ npm run serveL'enregistrement d'une fenêtre avec la méthode des emplacements vous permettra un accès rapide au modèle de fenêtre pré-fait. Cette méthode est la plus adaptée aux utilisateurs qui ne nécessitent aucun changement dans le style ou la disposition de la fenêtre elle-même.
Dirigez-vous vers /src/store/index.js
Enregistrez une nouvelle fenêtre en collant l'extrait suivant dans le tableau d'état Windows
{
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 et remplacez «WindowContent» par le nom du nouveau composant de contenu créé. windowContent: "MyNewWindowContent"/src/components/views/mynewwindowcontent.vue
< template >
< p > this is my new window's content! </ p >
</ template >/src/App.vue pour importer et enregistrez les nouveaux composants dans la section <cript>. import MyNewWindowContent from './components/views/MyNewWindowContent' components: {
... ,
MyNewWindowContent
}L'enregistrement d'une fenêtre personnalisée est également rendu relativement simple en raison de chaque fenêtre ayant un état d'objet dédié qui suivit la fenêtre à présenter. Vous voudrez peut-être enregistrer une fenêtre personnalisée si la disposition ou le style de la fenêtre lui-même doit être modifiée (c'est-à-dire la suppression ou l'ajout de boutons dans la barre supérieure de la fenêtre).
Dirigez-vous vers /src/store/index.js
Enregistrez une nouvelle fenêtre en collant l'extrait suivant dans le tableau d'état Windows
{
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'
Créez un nouveau composant de fenêtre nommé SpecialWindow.vue Under /src/components/template et copiez le contenu de Window.vue dans ce nouveau fichier .
À des fins de démonstration, nous modifierons simplement l'arrière-plan de la «barre supérieure» de la fenêtre et ajouterons du contenu en remplacement de la section des emplacements.
Collez cet extrait CSS dans la section Style.
. top-bar {
background-color : green !important ;
}Remplacez les étiquettes de fente par cet extrait de HTML.
< p > This is my new custom window </ p >/src/App.vue pour importer et enregistrez les nouveaux composants dans la section <cript>. import SpecialWindow from './components/template/SpecialWindow' components: {
... ,
SpecialWindow
}Le modèle comprend trois thèmes différents, le thème Blueprint par défaut, un thème macOS et un thème Windows. La commutation entre les thèmes est rendue relativement facile, mais certains thèmes peuvent nécessiter des ajustements mineurs.
/src/App.vue , dans la section du script, importez la variante Blueprint Navbar. 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 , dans la section Script, importez la variante Windows Navbar. 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 , dans la section du script, importez la variante MacOS NAVBAR et MacOS Top Navbar . 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' ; | Nom | Description | Taper |
|---|---|---|
| fenêtre | ID unique pour identifier une fenêtre | Chaîne |
| vitre | Suite à l'état ouvert, ferme ou minimisé de la fenêtre | Chaîne |
| nom d'affichage | Étiquette pour la fenêtre dans la grille d'application et l'en-tête de la fenêtre | Chaîne |
| composent de fenêtre | La propre interface utilisateur de la fenêtre peut être modifiée pour utiliser une fenêtre personnalisée, voir la section d'enregistrement de la fenêtre personnalisée | Chaîne |
| contenu de fenêtre | Le composant de contenu de la fenêtre Tracks sera inséré dans des emplacements si vous utilisez la fenêtre standard, voir l'enregistrement des fenêtres avec des machines à sous | Chaîne |
| windowcontentpadding | Définit le rembourrage du contenu dans la fenêtre | Chaîne ou nul |
| position | Définit la position CSS de la fenêtre | Chaîne |
| positionx | Définit le déplacement initial de la fenêtre | Chaîne |
| positif | Définit le déplacement de la fenêtre | Chaîne |
| iconimation | Nom de l'icône Image de la fenêtre, les icônes doivent être placées dans /assets/icons/ | Chaîne |
| alttext | Texte alternatif de l'icône | Chaîne |
| plein écran | Suit si une fenêtre est en plein écran ou non | Booléen |
/assets/css/ , allez-y avec!
