shards vue

Shards Vue - это бесплатный, красивый и современный набор для пользовательского интерфейса vue.js
на основе осколков.

Документация и демонстрация • Официальная страница

Начиная

Начало работы с Shards Vue довольно просто. Вы можете скачать Shards Vue через официальный веб -сайт, здесь, на Github в качестве пакета релиза или с помощью менеджера пакетов, такого как пряжа или NPM.

• Официальный сайт
• Выпуск пакета

Быстрый старт

Вы можете установить Shards Vue через пряжу или NPM.

// Install via Yarn
yarn add shards-vue

// Install via NPM
npm i shards-vue

Модуль Бундлеры

Если вы используете модуль, такой как WebPack или Rollup, вы можете включить всю библиотеку Vue 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,3 КБ

Построен с помощью

• Shards UI Kit
• Nouislider от Léon Gersen (лицензия WTFPL)
• Vuejs-Datepicker

Внося

Пожалуйста, прочитайте Anforming.md для получения подробной информации о нашем кодексе поведения и процессе отправки нам запросов.

Если вы хотите исправить ошибку или поработать над функцией, обязательно выполните приведенные ниже шаги, чтобы настроить среду разработки на вашей локальной машине:

1. Клонировать репозиторий.
2. Запустите yarn , чтобы установить все необходимые зависимости.
3. Установите Vue CLI и службу CLI во всем мире, работая: npm i -g @vue/cli @vue/cli-service-global или yarn global add @vue/cli-service-global .
4. Запустите yarn watch , чтобы начать сервер и запустить песочницу с горячей перезагрузкой.
5. См. Файл sandbox/Sandbox.vue для получения более подробной информации.

Дорожная карта

Посмотреть дорожную карту.

Изменение

Просмотреть заметные изменения.