@bpit/vue

bpit-vue

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

plugins: [
  [
    "import",
    {
      libraryName: "@bpit/vue",
      camel2DashComponentName: false,
      customName: name => {
        return `@bpit/vue/src/components/${name}`
      }
    }
  ]
]

import components

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

const FABItem = FAB.FABItem
const FABTrigger = FAB.FABTrigger
const FABContainer = FAB.FABContainer

sample

<FlockBanner>This is a banner!</FlockBanner>
<FlockButton>Submit</FlockButton>
<FABContainer :expand="expand">
  <FABItem @click="test" href="#" style="background-color:red" tooltip="Google+"
    >A</FABItem
  >
  <FABItem href="#" tooltip="Google+">B</FABItem>
  <FABItem href="#" tooltip="Google+">C</FABItem>
  <FABItem href="#" tooltip="Google+">D</FABItem>
  <FABTrigger @click="test" class="trigger" tooltip="share"></FABTrigger>
</FABContainer>

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