shards vue

Shards Vue是一個免費，美麗而現代的VUE.JS UI套件
基於碎片。

文檔和演示•官方頁面

入門

開始使用Shards Vue非常簡單。您可以通過官方網站，在GitHub上作為發布包或使用YARN或NPM等軟件包管理器下載Shards Vue。

• 官方網站
• 發布包

快速開始

您可以通過紗線或NPM安裝碎片VUE。

// Install via Yarn
yarn add shards-vue

// Install via NPM
npm i shards-vue

模塊捆綁器

如果您使用的是模塊捆綁包，例如WebPack或lollup，則可以在項目中包含整個碎片vue庫。

 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 ) ;

將組件註冊為VUE插件

如果您只想將某些組件註冊為VUE插件，請確保僅導入要使用的組件。

 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 )

導入單個文件組件

導入單文件組件也是可能的。

< 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 >

文件大小

您還可以隨時運行yarn bundlesize以檢查編譯的文件尺寸。

文件名	尺寸（Min.gz）
shards-vue.common.min.js	46.29kb
shards-vue.esm.min.js	46.24KB
shards-vue.umd.min.js	39.3kb

使用

• 碎片UI套件
• LéonGersen的Nouislider（WTFPL許可證）
• vuejs-datepicker

貢獻

請閱讀有關我們的行為準則的詳細信息以及向我們提交拉的請求的過程的詳細信息。

如果您想修復錯誤或處理功能，請確保按照以下步驟操作以設置本地計算機上的開發環境：

1. 克隆存儲庫。
2. 運行yarn以安裝所有必需的依賴項。
3. 通過運行： npm i -g @vue/cli @vue/cli-service-global或yarn global add @vue/cli-service-global 。
4. 運行yarn watch以啟動服務器並使用熱重加載運行沙箱。
5. 有關更多詳細信息，請參閱sandbox/Sandbox.vue文件。

路線圖

查看路線圖。

ChangElog

查看顯著的更改。