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

我可以聯繫你嗎？

• 當然！給我發電子郵件，並在此處查看我的網站。