sakai vue cli

Templat Admin Sakai untuk Vue

Pratinjau Langsung

Kunjungi situs web Sakai Vue untuk pratinjau langsung.

Memulai

Sakai adalah templat aplikasi untuk Vue berdasarkan Vue CLI yang menyediakan peralatan standar siap pakai untuk proyek Vue. Untuk memulai, kloning repositori ini dari GitHub dan instal dependensinya dengan npm atau benang.

 npm install

atau

 yarn

Langkah selanjutnya adalah menjalankan aplikasi menggunakan skrip servis dan navigasikan ke http://localhost:8080/ untuk melihat aplikasi. Itu saja, sekarang Anda dapat memulai pengembangan aplikasi Anda menggunakan template Sakai.

 npm run serve

Skrip Vue CLI

Perintah berikut berasal dari create-app-app.

 "npm run serve": Starts the development server
"npm run build": Builds the application for deployment.
"npm run lint": Executes the lint checks.
"npm run test:unit": Runs the tests.

Struktur

Sakai terdiri dari 2 bagian utama; tata letak aplikasi dan sumber daya. App.vue di dalam folder src adalah komponen utama yang berisi template untuk tata letak dasar sedangkan sumber daya yang diperlukan seperti struktur SASS untuk tata letak ditempatkan di dalam folder src/assets/ .

Komponen Tata Letak

Tata letak utama adalah templat App.vue , dibagi menjadi beberapa komponen anak seperti topbar, menu, dan footer. Berikut adalah template komponen App.vue yang mengimplementasikan logika seperti status menu, mode tata letak, dan sebagainya.

Menu

Menu adalah komponen terpisah yang ditentukan dalam file AppMenu.vue berdasarkan PrimeVue MenuModel API. Untuk menentukan item menu, navigasikan ke bagian data pada file App.vue dan tentukan model Anda sendiri sebagai struktur bertingkat menggunakan properti menu .

Ketergantungan

Dependensi Sakai tercantum di bawah dan perlu ditambahkan ke package.json.

{
    "primevue" : " ~3.12.2 " ,
    "primeicons" : " ~5.0.0 " ,
    "primeflex" : " ~3.1.2 " ,
}

Tema PrimeVue

Sakai menggunakan tema Saga, Arya, dan Vela gratis yang didistribusikan dalam PrimeVue, namun dapat digunakan dengan tema PrimeVue apa pun seperti material, tailwind, dan bootstrap karena warna tata letak berasal dari tema yang digunakan melalui variabel CSS.

Variabel SASS

Jika Anda ingin menyesuaikan variabel tata letak, buka file _variables.scss di bawah folder src/layout. Daftarnya cukup singkat karena sebagian besar variabel berasal dari tema PrimeVue yang digunakan.

src/aset/_variables.scss

$fontSize : 1rem;
$b or derRadius : 12px;
$transitionDuration : .2s;