shards vue

Shards Vue adalah kit Vue.js UI yang gratis, indah dan modern
berdasarkan pecahan.

Dokumentasi & Demo • Halaman Resmi

Memulai

Memulai dengan Shards Vue cukup sederhana. Anda dapat mengunduh Shards Vue melalui situs web resmi, di sini di GitHub sebagai paket rilis atau dengan menggunakan manajer paket seperti benang atau NPM.

• Situs web resmi
• Paket rilis

Awal yang cepat

Anda dapat menginstal shard vue melalui benang atau NPM.

// Install via Yarn
yarn add shards-vue

// Install via NPM
npm i shards-vue

Bundler modul

Jika Anda menggunakan bundler modul seperti Webpack atau Rollup, Anda dapat menyertakan seluruh perpustakaan Shards Vue di dalam proyek Anda.

 import Vue from 'vue'
import ShardsVue from 'shards-vue'

// Import base styles (Bootstrap and Shards)
import 'bootstrap/dist/css/bootstrap.css'
import 'shards-ui/dist/css/shards.css'

Vue . use ( ShardsVue ) ;

Mendaftarkan komponen sebagai plugin vue

Jika Anda hanya ingin mendaftarkan komponen tertentu sebagai plugin VUE, pastikan untuk mengimpor hanya komponen yang ingin Anda gunakan.

 import Vue from 'vue'

// Import base styles (Bootstrap and Shards)
import 'bootstrap/dist/css/bootstrap.css'
import 'shards-ui/dist/css/shards.css'

import { Button } from 'shards-vue/src/components'
Vue . use ( Button )

Mengimpor komponen file tunggal

Mengimpor komponen file tunggal juga dimungkinkan.

< template >
    < d-button @click = " handleClick " >Click Me!</ d-button >
</ template >

< script >
import dButton from ' shards-vue/src/components/button/Button '

export default {
    components : {
        dButton
    },
    methods : {
        handleClick () {
            alert ( ' You just clicked me! ' )
        }
    }
}
</ script >

Ukuran file

Anda juga dapat menjalankan yarn bundlesize kapan saja untuk memeriksa ukuran file yang dikompilasi.

Nama file	Ukuran (min.gz)
shards-vue.common.min.js	46.29KB
shards-vue.esm.min.js	46.24KB
shards-vue.umd.min.js	39.3kb

Dibangun menggunakan

• Shards UI Kit
• Nouislider oleh Léon Gersen (lisensi WTFPL)
• Vuejs-Datepicker

Berkontribusi

Harap baca Contributing.md untuk perincian tentang kode perilaku kami, dan proses untuk mengirimkan permintaan tarik kepada kami.

Jika Anda ingin memperbaiki bug atau mengerjakan fitur, pastikan untuk mengikuti langkah -langkah di bawah ini untuk mengatur lingkungan pengembangan di mesin lokal Anda:

1. Klon Repositori.
2. Jalankan yarn untuk menginstal semua dependensi yang diperlukan.
3. Instal Vue Cli dan layanan CLI secara global dengan menjalankan: npm i -g @vue/cli @vue/cli-service-global atau yarn global add @vue/cli-service-global .
4. Jalankan yarn watch untuk memulai server dan jalankan kotak pasir dengan pemuatan ulang panas.
5. Lihat file sandbox/Sandbox.vue untuk lebih jelasnya.

Peta jalan

Lihat peta jalannya.

Changelog

Lihat perubahan penting.