shards vue

Shards vue é um kit de interface do usuário gratuito, bonito e moderno
baseado em fragmentos.

Documentação e demonstração • Página oficial

Começando

Introdução ao shards Vue é bastante simples. Você pode baixar shards vue através do site oficial, aqui no GitHub como um pacote de lançamento ou usando um gerenciador de pacotes como YARN ou NPM.

• Site oficial
• Pacote de liberação

Início rápido

Você pode instalar shards vue via fio ou npm.

// Install via Yarn
yarn add shards-vue

// Install via NPM
npm i shards-vue

Módulos Module

Se você estiver usando um grupo de módulos como Webpack ou Rollup, poderá incluir toda a biblioteca de shards vue dentro do seu projeto.

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

Registrando componentes como plugins VUE

Se você deseja registrar apenas determinados componentes como plugins VUE, não deixe de importar apenas o componente que você deseja usar.

 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 )

Importando componentes de arquivo único

A importação de componentes de arquivo único também é possível.

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

Tamanhos de arquivo

Você também pode executar yarn bundlesize a qualquer momento para verificar os tamanhos de arquivo compilados.

Nome do arquivo	Tamanho (min.gz)
shards-vue.common.min.js	46.29kb
shards-vue.esm.min.js	46,24kb
shards-vue.umd.min.js	39.3kb

Construído usando

• SHARDS KIT UI
• Nouislider de Léon Gersen (licença WTFPL)
• Vuejs-Datepicker

Contribuindo

Leia contribuindo.md para obter detalhes sobre nosso código de conduta e o processo para enviar solicitações de puxar para nós.

Se você quiser corrigir um bug ou trabalhar em um recurso, siga as etapas abaixo para configurar o ambiente de desenvolvimento em sua máquina local:

1. Clone o repositório.
2. Execute yarn para instalar todas as dependências necessárias.
3. Instale o serviço Vue CLI e o CLI globalmente executando: npm i -g @vue/cli @vue/cli-service-global ou yarn global add @vue/cli-service-global .
4. Execute yarn watch para iniciar o servidor e executar a caixa de areia com recarregamento a quente.
5. Consulte o arquivo sandbox/Sandbox.vue para obter mais detalhes.

Roteiro

Veja o roteiro.

Changelog

Ver alterações notáveis.