vuejs os template
v0.1.0
| Tema de BluePrint | Tema de Windows | Tema de macOS |
|---|---|---|
 |  |  |
Este proyecto tiene como objetivo crear una plantilla interactiva del sistema operativo web para VUE. En la plantilla se incluyen la lógica necesaria para componentes de ventanas individuales, barras de navegación y cuadrículas de aplicaciones. Los usuarios pueden registrar nuevos componentes (personalizados o de otro tipo) fácilmente.
Descargue el último lanzamiento de la acera de esta página
Asegúrese de tener Vue.js instalado
Documentación oficial de Vue
Cambie el nombre de la carpeta a vuejs-os-template
CD en la carpeta del proyecto e instalar paquetes + dependencias
$ cd vuejs-os-template && npm install$ npm run serveEl registro de una ventana con el método de ranuras le permitirá un acceso rápido a la plantilla de ventana prefabricada. Este método es más adecuado para los usuarios que no requieren ningún cambio en el estilo o el diseño de la ventana.
Dirígete a /src/store/index.js
Registre una nueva ventana pegando el siguiente fragmento dentro de la matriz de estado de 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 y reemplace 'WindowContent' con el nombre del nuevo componente de contenido creado. windowContent: "MyNewWindowContent"/src/components/views/mynewwindowcontent.vue
< template >
< p > this is my new window's content! </ p >
</ template >/src/App.vue para importar y registrar los nuevos componentes en la sección <Script>. import MyNewWindowContent from './components/views/MyNewWindowContent' components: {
... ,
MyNewWindowContent
}El registro de una ventana personalizada también se hace relativamente simple debido a que cada ventana tiene un estado de objeto dedicado que rastrea la ventana hasta el presente. Es posible que desee registrar una ventana personalizada si el diseño o el estilo de la ventana en sí debe modificarse (es decir, la eliminación o la adición de botones en la barra superior de la ventana).
Dirígete a /src/store/index.js
Registre una nueva ventana pegando el siguiente fragmento dentro de la matriz de estado de 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'
Cree un nuevo componente de ventana llamado SpecialWindow.vue Under /src/components/template y copie el contenido de Window.vue en este nuevo archivo .
Para fines de demostración, simplemente cambiaremos el fondo de la 'barra superior' de la ventana y agregaremos algún contenido que reemplaza la sección de la ranura.
Pegue este fragmento CSS debajo de la sección de estilo.
. top-bar {
background-color : green !important ;
}Reemplace las etiquetas de ranura con este fragmento de HTML.
< p > This is my new custom window </ p >/src/App.vue para importar y registrar los nuevos componentes en la sección <Script>. import SpecialWindow from './components/template/SpecialWindow' components: {
... ,
SpecialWindow
}En la plantilla se incluyen tres temas diferentes, el tema de BluePrint predeterminado, un tema de MacOS y un tema de Windows. Cambiar entre temas se hace relativamente fácil, pero ciertos temas pueden requerir algunos ajustes menores.
/src/App.vue , debajo de la sección de script, importe 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 , debajo de la sección de script, importe la variante de 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 , debajo de la sección de script, importe la variante MacOS Navbar y la barra de navegación MacOS Top . 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' ; | Nombre | Descripción | Tipo |
|---|---|---|
| ventana | ID único para identificar una ventana | Cadena |
| escaparate | PISTA ESTADO ABIERTO, CERRA O MINIMIZADO DE VENTANA | Cadena |
| nombre para mostrar | Etiqueta para la ventana en la cuadrícula de aplicaciones y el título del encabezado de la ventana | Cadena |
| componente de la ventana | La propia interfaz de usuario de Window se puede cambiar para usar una ventana personalizada, consulte la sección de registro de ventana personalizada | Cadena |
| cabina | El componente de contenido de rastreo de la ventana se insertará en ranuras en las ranuras si el uso de la ventana estándar, consulte el registro de Windows con la sección de ranuras | Cadena |
| WindowContentPadding | Establece el relleno de contenido dentro de la ventana | Cadena o nulo |
| posición | Establece la posición CSS de la ventana | Cadena |
| posiciónx | Establece el desplazamiento X inicial de la ventana | Cadena |
| posición | Establece el desplazamiento y el desplazamiento de la ventana | Cadena |
| iconimia | Nombre del icono Imagen de la ventana, los iconos deben colocarse en /assets/icons/ | Cadena |
| alttext | Texto alternativo del icono | Cadena |
| pantalla completa | Rastrea si una ventana está en pantalla completa o no | Booleano |
/assets/css/ , ¡vuelve loco con él!
