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 또는 Rollup과 같은 모듈 Bundler를 사용하는 경우 프로젝트 내부에 전체 Shards 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éon Gersen의 Nouislider (WTFPL 라이센스)
• vuejs-datepicker

기여

당사의 행동 강령에 대한 자세한 내용과 당사에 풀 요청을 제출하는 프로세스는 Contributing.md를 읽으십시오.

버그를 수정하거나 기능에서 작업하려면 로컬 컴퓨터에서 개발 환경을 설정하려면 아래 단계를 따라야합니다.

1. 저장소를 복제하십시오.
2. yarn 실행하여 필요한 모든 종속성을 설치하십시오.
3. npm i -g @vue/cli @vue/cli-service-global 또는 yarn global add @vue/cli-service-global 을 통해 VUE CLI 및 CLI 서비스를 전 세계적으로 설치하십시오.
4. 서버를 시작하고 핫 재 장전으로 샌드 박스를 실행하려면 yarn watch 실행하십시오.
5. 자세한 내용은 sandbox/Sandbox.vue 파일을 참조하십시오.

로드맵

로드맵을보십시오.

changelog

주목할만한 변경 사항을보십시오.