vuejs os template

vue.js 용 OS 웹 사이트 템플릿

청사진 테마	Windows 테마	마코스 테마

목차

1. 프로젝트 개요
2. 특징
3. 기술
4. 사전 반품
5. 설정 지침
6. 슬롯으로 Windows 등록 (빠른 등록)
7. 커스텀 윈도우 등록 (고급 등록)
8. 창 API
9. FAQ

프로젝트 개요

이 프로젝트는 VUE 용 대화 형 웹 OS 템플릿을 만드는 것을 목표로합니다. 템플릿에는 개별 창 구성 요소, 네이브 바 및 앱 그리드에 필요한 논리가 모두 포함되어 있습니다. 사용자는 새로운 구성 요소 (사용자 정의 또는 기타)를 쉽게 등록 할 수 있습니다.

특징

• 상호 작용 가능하고 드래그 가능한 창
• 내장 내비게이션 바 (+ 로직)
• 창 논리 (상태, 전체 화면, 최소화 등)
• 테마 (Blueprint, Windows, MacOS)

기술

• vue 2
• vuex
• 상호 작용
• Momentjs

사전 반품

• Vue 2 (초보자)
• CSS (초보자)
• CSS와의 인내

설정 지침

1. 이 페이지의 Sidebae에서 최신 릴리스를 다운로드하십시오

2. vue.js가 설치되어 있는지 확인하십시오

VUE의 공식 문서

3. 폴더의 이름을 vuejs-os-template 로 바꿉니다

4. CD 프로젝트 폴더에 CD를 설치하고 패키지 + 종속성을 설치하십시오

$ cd vuejs-os-template && npm install

4. 봉사 프로젝트

$ npm run serve

Windows 등록 (슬롯 메소드)

슬롯 메소드에 창을 등록하면 사전 제작 된 창 템플릿에 빠르게 액세스 할 수 있습니다. 이 방법은 창 자체의 스타일 또는 레이아웃을 변경할 필요가없는 사용자에게 가장 적합합니다.

1. /src/store/index.js 로 이동하십시오

2. Windows State Array 내에 다음 스 니펫을 붙여서 새 창을 등록하십시오.

 {
     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로 변경하고 '디스플레이 이름'을 창의 선호 이름으로 변경하십시오.

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. <cript> 섹션에서 새 구성 요소를 가져오고 등록하려면 /src/App.vue 로 이동하십시오.

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

  components: {
    ... ,
    MyNewWindowContent
  }

6. 변경되거나 생성 된 모든 파일을 저장하고 LocalHost로 이동하여 변경 사항을 볼 수 있습니다.

Windows 등록 (사용자 정의 창)

사용자 정의 창을 등록하면 각 창에 전용 객체 상태가있는 객체 상태가 표시되기 때문에 비교적 간단합니다. 창 자체의 레이아웃 또는 스타일을 수정 해야하는 경우 사용자 정의 창을 등록 할 수 있습니다 (즉, 창 상단 막대에서 버튼을 제거하거나 추가).

1. /src/store/index.js 로 이동하십시오

2. Windows State Array 내에 다음 스 니펫을 붙여서 새 창을 등록하십시오.

 {
     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로 변경하고 '디스플레이 이름'을 창의 선호 이름으로 변경하십시오.

windowId: "MyCustomWindow" 

displayName: "Custom Window"

4. Window UI 자체는 'WindowComponent'아래에 저장되며 이제 등록 된 구성 요소를 변경하여 고유 한 사용자 지정 창을 등록 할 수 있습니다.

 windowComponent: 'SpecialWindow'

5. SpecialWindow.vue 밑 /src/components/template 라는 새 창 구성 요소를 만들고 window.vue의 내용을이 새 파일에 복사하십시오 .

6. 데모 목적으로, 우리는 단순히 창의 '상단 바'의 배경을 변경하고 슬롯 섹션을 대체하는 컨텐츠를 추가합니다.

이 CSS 스 니펫을 스타일 섹션 아래에 붙여 넣습니다.

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

이 HTML 스 니펫으로 슬롯 태그를 교체하십시오.

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

6. <cript> 섹션에서 새 구성 요소를 가져오고 등록하려면 /src/App.vue 로 이동하십시오.

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

  components: {
    ... ,
    SpecialWindow
  }

7. 변경되거나 생성 된 모든 파일을 저장하고 LocalHost로 이동하여 변경 사항을 볼 수 있습니다.

테마 전환

템플릿에는 세 가지 다른 테마, 기본 청사진 테마, MACOS 테마 및 Windows 테마가 포함되어 있습니다. 테마 간 전환은 비교적 쉽지만 특정 테마에는 약간의 조정이 필요할 수 있습니다.

청사진 테마

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

마코스 테마

1. 스크립트 섹션 아래에서 /src/App.vue 로 이동하여 MacOS Navbar 변형 및 MacOS 상단 Navbar를 가져옵니다.

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

2. 상단 Navbar를 등록하십시오

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	끈
창 상태	윈도우의 개방형, 닫히거나 최소화 된 상태를 추적합니다	끈
DisplayName	앱 그리드 및 창 헤더 제목에서 창에 대한 레이블	끈
Windowcomponent	Window의 자체 UI는 사용자 정의 창을 사용하도록 변경할 수 있습니다. 사용자 정의 창 등록 섹션을 참조하십시오.	끈
WindowContent	Tracks Window의 컨텐츠 구성 요소는 표준 창을 사용하는 경우 슬롯 아래에 삽입됩니다. 슬롯 섹션이있는 Windows 등록을 참조하십시오.	끈
WindowContentPadding	창 내에서 콘텐츠 패딩을 설정합니다	문자열 또는 널
위치	창의 CSS 위치를 설정합니다	끈
위치 X	창의 초기 x 변위를 설정합니다	끈
위치	창의 강한 y 변위를 설정합니다	끈
상징	창의 아이콘 이미지의 이름, 아이콘은 /assets/icons/	끈
alttext	아이콘의 대체 텍스트	끈
전체 화면	창이 전체 화면에 있는지 여부를 추적합니다	부울

FAQ

이것을 사용할 수 있습니까 ...

• 예.

CSS는 어디에 저장됩니까?

• /assets/css/ , 그것으로 가야합니다!

문제를 기부하거나 제출할 수 있습니까?

• 확신하는! 문제 또는 풀 요청을 자유롭게 작성하십시오.

Linux 테마가오고 있습니까?

• Linux 테마는 결국 자유롭게 만들 수있을 때 (프로젝트가 충분한 견인력을 얻는 경우) 도착합니다.

이것이 반응하지 않는 이유는 무엇입니까?

• 나는 주로 Vue에 익숙하고 Vue : D를 사용하는 것을 좋아합니다.

연락 할 수 있습니까?

• 물론! 저에게 이메일을 보내서 내 웹 사이트를 확인하십시오.