admin dashboard starter

Kit Dasbor Admin termudah di galaksi!

Tujuan kami adalah untuk menyederhanakan pengembangan spa - kirimkan dasbor admin Anda hari ini. Fokusnya adalah pada pola stack/arsitektur/desain, dan bukan pada estetika. Desainnya tetap minim untuk menjaga ini tetap sederhana, dan memudahkan untuk menerapkan desain Anda sendiri.

Kami juga meliput bagian desain - porting kerangka kerja admin utama ke teknologi starter dasbor admin kami. Berikut daftar lengkap (semakin banyak bintang, semakin banyak pekerjaan yang kami masukkan):

• Tabler
• Adminlte
• Adminator
• Dasbor material

Dibangun dengan langsing dan saPper. Rollup membangun proyek. Menyebarkan dengan firebase hosting, sekarang, melonjak atau langsung ke server Anda.

Secara keseluruhan, Anda bisa menggunakan dasbor admin langsung Anda hari ini.

Fitur

• Sistem komponen yang mudah digunakan. Komponen adalah HTML biasa, CSS, JS.
• Routing berbasis folder.
• Sistem otentikasi yang kuat. Colokkan Firebase, Passport.js atau AUTH0, dengan mudah.
• Pengujian dan Pengembangan Berbasis Komponen. Render komponen tunggal - berfungsi dan berulang lebih cepat. Uji unit yang kuat/sistem uji komponen diatur.
• Sumber Data. Mudah mencolokkan data Anda sendiri - dari database, file atau server jarak jauh.
• Tes integrasi dengan cypress.
• Beralih antara lingkungan Dev dan Prod dari baris perintah.
• Menyebarkan dari baris perintah ke layanan populer.

Menjalankan proyek

Bagaimanapun Anda mendapatkan kode, Anda dapat menginstal dependensi dan menjalankan proyek dalam mode pengembangan dengan:

 cd admin-dashboard-starter
npm install # or yarn
npm run dev

Buka LocalHost: 3000 dan mulailah mengklik sekitar.

Konsultasikan Sapper.svelte.dev untuk bantuan memulai.

Struktur

Sapper berharap menemukan dua direktori di akar proyek Anda - src dan static .

SRC

Direktori SRC berisi titik masuk template.html aplikasi Anda- client.js , server.js , dan routes secara opsional) service-worker.js .

SRC/Rute

Ini adalah jantung dari aplikasi Sapper Anda. Ada dua jenis rute - halaman , dan rute server .

Halaman adalah komponen langsing yang ditulis dalam file .svelte . Ketika pengguna pertama kali mengunjungi aplikasi, mereka akan dilayani versi rute yang diseret server yang dimaksud, ditambah beberapa JavaScript yang 'menghidrasi' halaman dan menginisialisasi router sisi klien. Sejak saat itu, menavigasi ke halaman lain ditangani sepenuhnya pada klien untuk nuansa yang cepat dan seperti aplikasi. (Sapper akan memuat dan menyimpan kode untuk halaman -halaman berikutnya, sehingga navigasi instan.)

Rute server adalah modul yang ditulis dalam file .js , bahwa fungsi ekspor yang sesuai dengan metode HTTP. Setiap fungsi menerima objek request dan response yang tegas sebagai argumen, ditambah fungsi next . Ini berguna untuk membuat API JSON, misalnya.

Ada tiga aturan sederhana untuk penamaan file yang menentukan rute Anda:

• File yang disebut src/routes/about.svelte sesuai dengan rute /about . File yang disebut src/routes/blog/[slug].svelte sesuai dengan rute /blog/:slug , dalam hal ini params.slug tersedia untuk rute
• File src/routes/index.svelte (atau src/routes/index.js ) sesuai dengan root aplikasi Anda. src/routes/about/index.svelte diperlakukan sama dengan src/routes/about.svelte .
• File dan direktori dengan garis bawah terkemuka tidak membuat rute. Ini memungkinkan Anda untuk mengolokasi modul helper dan komponen dengan rute yang bergantung padanya - misalnya Anda dapat memiliki file yang disebut src/routes/_helpers/datetime.js dan tidak akan membuat rute /_helpers/datetime rute

statis

Direktori statis berisi aset statis yang harus tersedia. Ini disajikan menggunakan SIRV.

Dalam file layanan-pekerjaan Anda, Anda dapat mengimpor ini sebagai files dari manifes yang dihasilkan ...

 import { files } from '@sapper/service-worker' ;

... Sehingga Anda dapat menyimpannya (meskipun Anda dapat memilih untuk tidak, misalnya jika Anda tidak ingin menyimpan file yang sangat besar).

Konfigurasi Bundler

Sapper menggunakan rollup atau webpack untuk memberikan impor pemisahan kode dan dinamis, serta menyusun komponen langsing Anda. Dengan Webpack, ini juga menyediakan pemuatan ulang modul panas. Selama Anda tidak melakukan apa pun, Anda dapat mengedit file konfigurasi untuk menambahkan plugin apa pun yang Anda inginkan.

Mode dan penempatan produksi

Untuk memulai versi produksi aplikasi Anda, jalankan npm run build && npm start . Ini akan menonaktifkan pemuatan ulang langsung, dan mengaktifkan plugin bundler yang sesuai.

Anda dapat menggunakan aplikasi Anda ke lingkungan apa pun yang mendukung simpul 8 atau lebih. Sebagai contoh, untuk digunakan sekarang, jalankan perintah ini:

npm install -g now
now

Menggunakan komponen eksternal

Saat menggunakan komponen Svelte yang diinstal dari NPM, seperti @lsveltejs/lsvelte-virtual-list, Svelte membutuhkan sumber komponen asli (daripada javascript yang diolah sebelumnya yang dikirimkan dengan komponen). Ini memungkinkan komponen untuk diserahkan sisi server, dan juga membuat aplikasi sisi klien Anda lebih kecil.

Karena itu, penting bahwa bundler tidak memperlakukan paket sebagai ketergantungan eksternal . Anda dapat memodifikasi opsi external di bawah server di rollup.config.js atau opsi externals di webpack.config.js, atau hanya menginstal paket ke devDependencies daripada dependencies , yang akan menyebabkannya dibundel (dan karenanya disusun) dengan Aplikasi Anda:

npm install -D @sveltejs/svelte-virtual-list

Bug dan umpan balik

Harap vokal di pelacak edisi DBH.