vuejs os template
v0.1.0
| Tema cetak biru | Tema Windows | Tema MacOS |
|---|---|---|
 |  |  |
Proyek ini bertujuan untuk membuat template Web OS interaktif untuk Vue. Termasuk dalam templat adalah semua logika yang diperlukan untuk komponen jendela individu, Navbars dan grid aplikasi. Pengguna dapat mendaftarkan komponen baru (khusus atau tidak) dengan mudah.
Unduh rilis terbaru dari sidebae halaman ini
Pastikan Anda menginstal vue.js
Dokumentasi resmi dari vue
Ubah nama folder menjadi vuejs-os-template
CD ke folder proyek dan instal paket + dependensi
$ cd vuejs-os-template && npm install$ npm run serveMendaftarkan jendela dengan metode slot akan memungkinkan Anda akses cepat ke templat jendela yang sudah dibuat sebelumnya. Metode ini paling cocok untuk pengguna yang tidak memerlukan perubahan dalam gaya atau tata letak jendela itu sendiri.
Kepala ke /src/store/index.js
Daftarkan jendela baru dengan menempelkan cuplikan berikut di dalam array 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
} ,windowId: "MyNewWindow" displayName: "New Window"/src/components/views folder dan ganti 'windowcontent' dengan nama komponen konten baru yang dibuat. windowContent: "MyNewWindowContent"/src/components/views/mynewindowcontent.vue
< template >
< p > this is my new window's content! </ p >
</ template >/src/App.vue untuk mengimpor dan mendaftarkan komponen baru di bawah bagian <script>. import MyNewWindowContent from './components/views/MyNewWindowContent' components: {
... ,
MyNewWindowContent
}Mendaftarkan jendela khusus juga dibuat relatif sederhana karena setiap jendela memiliki status objek khusus yang melacak jendela untuk disajikan. Anda mungkin ingin mendaftarkan jendela khusus jika tata letak atau penataan jendela itu sendiri perlu dimodifikasi (yaitu penghapusan atau penambahan tombol di bilah atas jendela).
Kepala ke /src/store/index.js
Daftarkan jendela baru dengan menempelkan cuplikan berikut di dalam array 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
} ,windowId: "MyCustomWindow" displayName: "Custom Window" windowComponent: 'SpecialWindow'
Buat komponen jendela baru bernama SpecialWindow.vue Under /src/components/template dan salin konten Window.vue ke dalam file baru ini .
Untuk tujuan demonstrasi, kami hanya akan mengubah latar belakang 'top-bar' jendela dan menambahkan beberapa konten mengganti bagian slot.
Tempel cuplikan CSS ini di bawah bagian gaya.
. top-bar {
background-color : green !important ;
}Ganti tag slot dengan cuplikan HTML ini.
< p > This is my new custom window </ p >/src/App.vue untuk mengimpor dan mendaftarkan komponen baru di bawah bagian <script>. import SpecialWindow from './components/template/SpecialWindow' components: {
... ,
SpecialWindow
}Termasuk dalam templat adalah tiga tema yang berbeda, tema cetak biru default, tema macOS dan tema Windows. Beralih di antara tema dibuat relatif mudah tetapi tema tertentu mungkin memerlukan beberapa penyesuaian kecil.
/src/App.vue , di bawah bagian skrip, impor varian navbar cetak biru. import Navbar from './components/blueprint/Navbar' @import './assets/css/blueprint/app.css' ;
@import './assets/css/blueprint/window.css' ;
@import './assets/css/blueprint/appgrid.css' ;/src/App.vue , di bawah bagian skrip, impor varian Windows Navbar. import Navbar from './components/windows/Navbar' @import './assets/css/windows/app.css' ;
@import './assets/css/windows/window.css' ;
@import './assets/css/windows/appgrid.css' ;/src/App.vue , di bawah bagian skrip, impor varian MacOS Navbar dan MacOS Top Navbar . import Navbar from './components/macos/Navbar'
import TopNavbar from './components/macos/TopNavbar.vue'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' ; | Nama | Keterangan | Jenis |
|---|---|---|
| windowid | ID unik untuk mengidentifikasi jendela | Rangkaian |
| WindowState | Melacak keadaan terbuka, dekat atau diminimalkan jendela | Rangkaian |
| DisplayName | Label untuk Judul Window in App Grid dan Window Header | Rangkaian |
| WindowComponent | UI Window's sendiri, dapat diubah untuk menggunakan jendela khusus, lihat bagian Pendaftaran Jendela Kustom | Rangkaian |
| WindowContent | Lacak komponen konten jendela, akan dimasukkan ke dalam slot di bawah jika memanfaatkan jendela standar, lihat pendaftaran windows dengan bagian slot | Rangkaian |
| WindowContentPadding | Mengatur padding konten di dalam jendela | String atau nol |
| posisi | Mengatur posisi CSS jendela | Rangkaian |
| Positionx | Menetapkan pemindahan inisial x jendela | Rangkaian |
| posisi | Mengatur pemindahan jendela intial | Rangkaian |
| ikonimage | Nama Ikon Gambar jendela, ikon harus ditempatkan di /assets/icons/ | Rangkaian |
| Alttext | Teks alternatif Ikon | Rangkaian |
| layar penuh | Melacak apakah jendela di layar penuh atau tidak | Boolean |
/assets/css/ , menjadi liar dengan itu!
