vuejs os template

vue.jsのOS Webサイトテンプレート

青写真テーマ	Windowsテーマ	MacOSテーマ

目次

1. プロジェクトの概要
2. 特徴
3. テクノロジー
4. 前提条件
5. セットアップ手順
6. スロットでウィンドウを登録する（クイック登録）
7. カスタムウィンドウ（高度な登録）を登録する
8. ウィンドウAPI
9. よくある質問

プロジェクトの概要

このプロジェクトは、VUE用のインタラクティブなWeb OSテンプレートを作成することを目的としています。テンプレートに含まれるのは、個々のウィンドウコンポーネント、NAVBAR、APPグリッドに必要なロジックです。ユーザーは、新しいコンポーネント（カスタムまたはその他）を簡単に登録できます。

特徴

• インタラクティブでドラッグ可能なウィンドウ
• 内蔵ナビゲーションバー（+ロジック）
• ウィンドウロジック（状態、フルスクリーン、最小化など）
• テーマ（青写真、Windows、MacOS）

テクノロジー

• Vue 2
• Vuex
• InteractJS
• Momentjs

前提条件

• Vue 2（初心者）
• CSS（初心者）
• CSSの忍耐

セットアップ手順

1. このページのサイドベーから最新リリースをダウンロードしてください

2. vue.jsがインストールされていることを確認してください

Vueからの公式文書

3. フォルダーの名前をvuejs-os-templateに変更します

4. ProjectフォルダーへのCDとインストールパッケージ +依存関係

$ cd vuejs-os-template && npm install

4. プロジェクトを提供します

$ npm run serve

Windows（スロットメソッド）を登録する

スロットメソッドにウィンドウを登録すると、事前に作成されたウィンドウテンプレートにすばやくアクセスできます。この方法は、ウィンドウ自体のスタイリングやレイアウトの変更を必要としないユーザーに最も適しています。

1. /src/store/index.jsに向かいます

2. Windows Stateアレイ内に次のスニペットを貼り付けて、新しいウィンドウを登録します

 {
     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. 「ウィンドウ」を一意のウィンドウIDに変更し、「表示名」をウィンドウの優先名に変更します。

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（カスタムウィンドウ）を登録する

カスタムウィンドウの登録も、各ウィンドウが提示するウィンドウを追跡する専用のオブジェクト状態があるため、比較的単純になります。ウィンドウ自体のレイアウトまたはスタイリングを変更する必要がある場合は、カスタムウィンドウを登録することをお勧めします（つまり、ウィンドウのトップバーのボタンの削除または追加）。

1. /src/store/index.jsに向かいます

2. Windows Stateアレイ内に次のスニペットを貼り付けて、新しいウィンドウを登録します

 {
     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. 「ウィンドウ」を一意のウィンドウIDに変更し、「表示名」をウィンドウの優先名に変更します。

windowId: "MyCustomWindow" 

displayName: "Custom Window"

4. ウィンドウUI自体は「WindowComponent」の下に保存されており、登録されたコンポーネントを変更して独自のカスタムウィンドウを登録できるようになりました。

 windowComponent: 'SpecialWindow'

5. /src/components/templateの下でSpecialWindow.vueという名前の新しいウィンドウコンポーネントを作成し、 window.vueの内容をこの新しいファイルにコピーします。

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テーマの3つの異なるテーマが含まれています。テーマ間の切り替えは比較的簡単になりますが、特定のテーマには少しの微調整が必​​要になる場合があります。

青写真テーマ

1. スクリプトセクションの下で、 /src/App.vueにアクセスして、blueprint navbarバリアントをインポートします。

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

2. app.vueのスタイルセクションで、Blueprint 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トップナヴバーをインポートします。

 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

名前	説明	タイプ
窓	ウィンドウを識別する一意のID	弦
WindowState	ウィンドウのオープン、クローズ、または最小化状態を追跡します	弦
表示名	アプリグリッドとウィンドウヘッダーのタイトルのウィンドウのラベル	弦
WindowComponent	ウィンドウ独自のUIは、カスタムウィンドウを使用するように変更できます。カスタムウィンドウ登録セクションを参照してください	弦
WindowContent	[ウィンドウのコンテンツコンポーネントを追跡]は、標準のウィンドウを使用する場合はスロットの下に挿入されます。スロット付きのWindowsの登録を参照してください。	弦
WindowContentPadding	ウィンドウ内にコンテンツのパディングを設定します	文字列またはnull
位置	ウィンドウのCSS位置を設定します	弦
PositionX	ウィンドウの初期x変位を設定します	弦
位置	ウィンドウの変位を設定します	弦
ICONIMAGE	アイコンの名前ウィンドウの画像、アイコンは/assets/icons/	弦
alttext	アイコンの代替テキスト	弦
全画面表示	ウィンドウがフルスクリーンにあるかどうかを追跡します	ブール

よくある質問

これを使用できますか...

• はい。

CSSはどこに保存されますか？

• /assets/css/ 、それと一緒に動きましょう！

貢献したり、問題を提出したりできますか？

• もちろん！お気軽に問題やプルリクエストを作成してください。

Linuxのテーマは来ていますか？

• Linuxのテーマは、私が自由にそれを作成できるときに最終的に到着します（そして、プロジェクトが十分なトラクションを獲得した場合）。

なぜこれが反応しないのですか？

• 私は主にVueに精通しています、そして私はVue：Dを使って楽しんでいます

連絡できますか？

• もちろん！私に電子メールを送って、ここで私のウェブサイトをチェックしてください。