https://github.com/dreambo8563/bpit-vue

vue effects component package 🚀
https://github.com/dreambo8563/bpit-vue

components css3 vue2

Last synced: 3 days ago
JSON representation

vue effects component package 🚀

• Host: GitHub
• URL: https://github.com/dreambo8563/bpit-vue
• Owner: dreambo8563
• License: mit
• Created: 2018-09-27T12:00:22.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2020-05-27T02:39:28.000Z (over 4 years ago)
• Last Synced: 2024-09-25T21:45:20.020Z (8 days ago)
• Topics: components, css3, vue2
• Language: Vue
• Homepage: https://dreambo8563.github.io/bpit-vue/
• Size: 5.41 MB
• Stars: 15
• Watchers: 2
• Forks: 2
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# bpit-vue

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/ac3d1624c93b435cbfe519aeb0511617)](https://app.codacy.com/app/dreambo8563/bpit-vue?utm_source=github.com&utm_medium=referral&utm_content=dreambo8563/bpit-vue&utm_campaign=Badge_Grade_Dashboard) [![Greenkeeper badge](https://badges.greenkeeper.io/dreambo8563/bpit-vue.svg)](https://greenkeeper.io/)

[![Build Status](https://travis-ci.com/dreambo8563/bpit-vue.svg?branch=master)](https://travis-ci.com/dreambo8563/bpit-vue)

[![Known Vulnerabilities](https://snyk.io/test/github/dreambo8563/bpit-vue/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dreambo8563/bpit-vue?targetFile=package.json)

![](https://raw.githubusercontent.com/dreambo8563/static-assets/master/bpit/100*100.png)

## Intro

### What is bpit/vue?

bpit/vue is not a component UI kit, we didn't have the consistent theme for these components, it's just a collection of effects components.

bpit/vue is a good place for beginners to learn How to create their UI Kits. Now, it's just a showcase of the effects I can gather from the Internet (codepen, github...) and transfered to vue `things`

### What we focus?

We focus on the effects of these components other than functionailties. That's why it's not a ui kit.

We take more time on css part and hope to make it more general and easy to use, so we encapsulate them into vue component/directives.

### Why we need it?

There are so many resources on the Internet, we can make use of them to save time and to be more efficient. bpit/vue collects them, encapsulates them, imporves them.

Install easy && Import on demand && Everything in one place

## import on demand

> npm install babel-plugin-import --save-dev

babel.config.js

```js

plugins: [

  [

    "import",

    {

      libraryName: "@bpit/vue",

      camel2DashComponentName: false,

      customName: name => {

        return `@bpit/vue/src/components/${name}`

      }

    }

  ]

]

```

#### import components

```js

import { FlockBanner, FAB, FlockButton } from "@bpit/vue"

const FABItem = FAB.FABItem

const FABTrigger = FAB.FABTrigger

const FABContainer = FAB.FABContainer

```

### sample

```html

This is a banner!

Submit

  A

  B

  C

  D

  

```

## Project setup

```

npm install

```

### Compiles and hot-reloads for development

```

npm run serve

```

### Compiles and minifies for production

```

npm run build

```

### Run your tests

```

npm run test

```

### Lints and fixes files

```

npm run lint

```