https://github.com/dreambo8563/bpit-vue
vue effects component package 🚀
https://github.com/dreambo8563/bpit-vue
components css3 vue2
Last synced: 3 months 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 (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-10-23T01:03:08.000Z (9 months ago)
- Last Synced: 2025-03-26T07:42:44.342Z (3 months ago)
- Topics: components, css3, vue2
- Language: Vue
- Homepage: https://dreambo8563.github.io/bpit-vue/
- Size: 2.28 MB
- Stars: 15
- Watchers: 1
- Forks: 2
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# bpit-vue
[](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) [](https://greenkeeper.io/)
[](https://travis-ci.com/dreambo8563/bpit-vue)
[](https://snyk.io/test/github/dreambo8563/bpit-vue?targetFile=package.json)
## 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
```