vuejs os template

เทมเพลตเว็บไซต์ OS สำหรับ vue.js

ชุดรูปแบบพิมพ์เขียว	ธีม Windows	ธีม Macos

สารบัญ

1. ภาพรวมโครงการ
2. คุณสมบัติ
3. เทคโนโลยี
4. สิ่งที่ต้องมีก่อน
5. คำแนะนำการตั้งค่า
6. ลงทะเบียน Windows ด้วยสล็อต (การลงทะเบียนอย่างรวดเร็ว)
7. ลงทะเบียน Windows ที่กำหนดเอง (การลงทะเบียนขั้นสูง)
8. API หน้าต่าง
9. คำถามที่พบบ่อย

ภาพรวมโครงการ

โครงการนี้มีจุดมุ่งหมายเพื่อสร้างเทมเพลต Web OS แบบโต้ตอบสำหรับ Vue สิ่งที่รวมอยู่ในเทมเพลตลอจิกที่จำเป็นทั้งหมดสำหรับส่วนประกอบหน้าต่างแต่ละรายการ Navbars และกริดแอพ ผู้ใช้สามารถลงทะเบียนส่วนประกอบใหม่ (กำหนดเองหรืออื่น ๆ ) ได้อย่างง่ายดาย

คุณสมบัติ

• หน้าต่างที่มีการโต้ตอบและพุ่งออกได้
• แถบการนำทางในตัว (+ ลอจิก)
• Window Logic (สถานะ, Fullscreen, Minimization ฯลฯ )
• ชุดรูปแบบ (พิมพ์เขียว, Windows, MacOS)

เทคโนโลยี

• Vue 2
• Vuex
• การโต้ตอบ
• momentjs

สิ่งที่ต้องมีก่อน

• Vue 2 (สามเณร)
• CSS (สามเณร)
• ความอดทนกับ CSS

คำแนะนำการตั้งค่า

1. ดาวน์โหลดรุ่นล่าสุดจาก sidebae ของหน้านี้

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 (หน้าต่างที่กำหนดเอง)

การลงทะเบียนหน้าต่างที่กำหนดเองนั้นค่อนข้างง่ายเนื่องจากแต่ละหน้าต่างมีสถานะวัตถุเฉพาะที่ติดตามหน้าต่างเพื่อนำเสนอ คุณอาจต้องการลงทะเบียนหน้าต่างที่กำหนดเองหากจำเป็นต้องมีการแก้ไขรูปแบบหรือสไตล์ของหน้าต่าง (เช่นการถอดหรือเพิ่มปุ่มในแถบด้านบนของหน้าต่าง)

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 Under /src/components/template และ คัดลอกเนื้อหาของ 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 การสลับระหว่างธีมนั้นค่อนข้างง่าย แต่ธีมบางอย่างอาจต้องใช้การปรับแต่งเล็กน้อย

ชุดรูปแบบพิมพ์เขียว

1. ตรงไปที่ /src/App.vue ภายใต้ส่วนของสคริปต์นำเข้า Variant 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 ภายใต้ส่วนสคริปต์นำเข้า Variant 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 Top 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 หน้าต่าง

ชื่อ	คำอธิบาย	พิมพ์
windowid	ID ที่ไม่ซ้ำกันเพื่อระบุหน้าต่าง	สาย
Windowstate	แทร็กของหน้าต่างเปิดปิดหรือย่อขนาดเล็กลง	สาย
แสดงชื่อ	ฉลากสำหรับหน้าต่างในแอพกริดและชื่อส่วนหัวของหน้าต่าง	สาย
WindowComponent	UI ของหน้าต่างสามารถเปลี่ยนได้เพื่อใช้หน้าต่างที่กำหนดเองดูส่วนการลงทะเบียนหน้าต่างที่กำหนดเอง	สาย
windowcontent	ติดตามส่วนประกอบเนื้อหาของหน้าต่างจะถูกแทรกใต้ช่องหากใช้หน้าต่างมาตรฐานดูการลงทะเบียนของ Windows ด้วยส่วนสล็อต	สาย
WindowContentPadding	ตั้งค่าการขยายเนื้อหาภายในหน้าต่าง	สตริงหรือว่างเปล่า
ตำแหน่ง	ตั้งค่าตำแหน่ง CSS ของหน้าต่าง	สาย
ตำแหน่ง	ตั้งค่าการกระจัด x เริ่มต้นของหน้าต่าง	สาย
ตำแหน่ง	ตั้งค่าการกระจัดของหน้าต่าง	สาย
ไอคอน	ชื่อไอคอนภาพของหน้าต่างควรวางไอคอนใน /assets/icons/	สาย
alttext	ข้อความทางเลือกของไอคอน	สาย
เต็มหน้าจอ	ติดตามว่าหน้าต่างอยู่ในเต็มหน้าจอหรือไม่	บูลีน

คำถามที่พบบ่อย

ฉันสามารถใช้สิ่งนี้สำหรับ ...

• ใช่.

CSS เก็บไว้ที่ไหน?

• /assets/css/ , ไปป่าด้วย!

ฉันสามารถมีส่วนร่วมหรือยื่นปัญหาได้หรือไม่?

• แน่นอน! อย่าลังเลที่จะสร้างปัญหาหรือคำขอดึง

ธีม Linux กำลังจะมาหรือไม่?

• ชุดรูปแบบ Linux จะมาถึงในที่สุดเมื่อฉันมีอิสระที่จะสร้างมัน (และหากโครงการได้รับแรงฉุดมากพอ)

ทำไมสิ่งนี้ถึงไม่ตอบสนอง?

• ฉันคุ้นเคยกับ Vue เป็นส่วนใหญ่และฉันสนุกกับการใช้ Vue: D

ฉันสามารถติดต่อคุณได้หรือไม่?

• แน่นอน! ส่งอีเมลถึงฉันและตรวจสอบเว็บไซต์ของฉันที่นี่