vuejs os template

vue.js的OS网站模板

蓝图主题	Windows主题	MacOS主题

目录

1. 项目概述
2. 特征
3. 技术
4. 先决条件
5. 设置说明
6. 用插槽注册窗口（快速注册）
7. 注册自定义窗口（高级注册）
8. 窗口API
9. 常问问题

项目概述

该项目旨在为VUE创建交互式Web OS模板。模板中包含的都是单个窗口组件，Navbars和App Grids的必要逻辑。用户可以轻松地注册新组件（自定义或其他方式）。

特征

• 可相互作用和可拖动的窗口
• 内置导航栏（+逻辑）
• 窗口逻辑（状态，全屏，最小化等）
• 主题（蓝图，Windows，Macos）

技术

• VUE 2
• vuex
• Interactjs
• 时刻

先决条件

• VUE 2（新手）
• CSS（新手）
• 与CSS的耐心

设置说明

1. 下载此页面的最新版本

2. 确保已安装vue.js

Vue的官方文件

3. 将文件夹重命名为vuejs-os-template

4. CD进入项目文件夹并安装软件包 +依赖项

$ cd vuejs-os-template && npm install

4. 服务项目

$ npm run serve

注册Windows（插槽方法）

使用插槽方法注册窗口将使您快速访问预制窗口模板。此方法最适合不需要更改窗口本身的样式或布局的用户。

1. 前往/src/store/index.js

2. 通过在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
 } ,

3. 将“ WindowID”更改为唯一的窗口ID和“ DisplayName”，为窗口的首选名称。

windowId: "MyNewWindow" 

displayName: "New Window"

4. 窗口中显示的内容已注册为“占位符”组件。只需在/src/components/views文件夹下创建一个新的内容组件，然后用创建的新内容组件的名称替换'windowcontent'。

windowContent: "MyNewWindowContent"

/src/components/views/mynewwindowcontent.vue

 < template >
  < p > this is my new window's content! </ p >
</ template >

5. 前往/src/App.vue以<script>部分导入并注册新组件。

  import MyNewWindowContent from './components/views/MyNewWindowContent' 

  components: {
    ... ,
    MyNewWindowContent
  }

6. 保存所有更改或创建的文件，然后前往Localhost查看更改。

注册Windows（自定义窗口）

注册一个自定义窗口也相对简单，因为每个窗口都有一个专用对象状态跟踪要显示的窗口。如果需要修改窗口本身的布局或样式，则可能需要注册一个自定义窗口（即在Window的顶部栏中删除或添加按钮）。

1. 前往/src/store/index.js

2. 通过在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
 } ,

3. 将“ WindowID”更改为唯一的窗口ID和“ DisplayName”，为窗口的首选名称。

windowId: "MyCustomWindow" 

displayName: "Custom Window"

4. 窗口UI本身存储在“ WindowComponent”下，我们现在可以通过更改注册组件来注册自己的自定义窗口。

 windowComponent: 'SpecialWindow'

5. 创建一个名为SpecialWindow.vue的新窗口组件/src/components/template ，然后将window的内容复制到此新文件中。

6. 为了演示目的，我们将简单地更改窗口的“顶杆”的背景，并添加一些更换插槽部分的内容。

将此CSS片段粘贴在样式部分下。

. top-bar {
     background-color : green !important ;
}

用HTML的片段替换插槽标签。

 < p > This is my new custom window </ p >

6. 前往/src/App.vue以<script>部分导入并注册新组件。

  import SpecialWindow from './components/template/SpecialWindow' 

  components: {
    ... ,
    SpecialWindow
  }

7. 保存所有更改或创建的文件，然后前往Localhost查看更改。

切换主题

模板中包含的三个不同的主题：默认蓝图主题，macos主题和Windows主题。在主题之间切换相对容易，但是某些主题可能需要进行一些较小的调整。

蓝图主题

1. 转到脚本部分下的/src/App.vue ，导入蓝图navbar变体。

 import Navbar from './components/blueprint/Navbar'

2. 在app.vue的样式部分下，导入蓝图CSS变体。

 @import './assets/css/blueprint/app.css' ;
@import './assets/css/blueprint/window.css' ;
@import './assets/css/blueprint/appgrid.css' ;

3. 保存所有更改，然后前往Localhost查看更改。

Windows主题

1. 转到脚本部分下的/src/App.vue ，导入Windows Navbar变体。

 import Navbar from './components/windows/Navbar'

2. 在App.Vue的样式部分下，导入Windows CSS变体。

 @import './assets/css/windows/app.css' ;
@import './assets/css/windows/window.css' ;
@import './assets/css/windows/appgrid.css' ;

MacOS主题

1. 转到脚本部分下的/src/App.vue ，导入MacOS Navbar变体和MacOS顶级NAVBAR 。

 import Navbar from './components/macos/Navbar'
import TopNavbar from './components/macos/TopNavbar.vue'

2. 注册顶级磁带

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' ; 

窗口API

姓名	描述	类型
WindowSID	识别窗口的唯一ID	细绳
WindowState	跟踪窗口的开放，关闭或最小化状态	细绳
DisplayName	窗口的标签在应用网格和窗口标题标题	细绳
WindowComponent	窗口自己的UI，可以更改以使用自定义窗口，请参阅自定义窗口注册部分	细绳
窗口	跟踪窗口的内容组件，如果使用标准窗口，将插入插槽下的插槽中，请参阅带有插槽部分的Windows的注册	细绳
WindowContentPadding	在窗口内设置内容的填充	字符串或null
位置	设置窗口的CSS位置	细绳
位置X。	设置窗口的初始x位移	细绳
位置	设置窗口的Intial Y位移	细绳
图标	窗口图像的名称，应将图标放置在/assets/icons/	细绳
alttext	图标的替代文本	细绳
全屏	跟踪窗口是否在全屏中	布尔

常问问题

我可以用来...

• 是的。

CSS存储在哪里？

• /assets/css/ ，与之狂奔！

我可以贡献或提出问题吗？

• 当然！随意创建问题或拉动请求。

Linux主题即将到来吗？

• 当我自由创建它时，Linux主题最终将到达（如果项目获得足够的吸引力）。

为什么这不是反应？

• 我主要熟悉Vue，我喜欢使用Vue：D

我可以联系你吗？

• 当然！给我发电子邮件，并在此处查看我的网站。