bpit vue

bpit-vue

Introduction

Qu'est-ce que BPIT / VUE?

BPIT / VUE n'est pas un kit d'interface utilisateur de composant, nous n'avions pas le thème cohérent de ces composants, c'est juste une collection de composants d'effets.

BPIT / VUE est un bon endroit pour les débutants pour apprendre à créer leurs kits d'interface utilisateur. Maintenant, c'est juste une vitrine des effets que je peux recueillir sur Internet (codepen, github ...) et transféré à Vue things

Qu'est-ce que nous concentrons?

Nous nous concentrons sur les effets de ces composants autres que les fonctions de fonction. C'est pourquoi ce n'est pas un kit d'interface utilisateur.

Nous prenons plus de temps sur la partie CSS et espérons le rendre plus général et plus facile à utiliser, nous les encapsulons donc en composant / directives VUE.

Pourquoi en avons-nous besoin?

Il y a tellement de ressources sur Internet, nous pouvons les utiliser pour gagner du temps et pour être plus efficaces. BPIT / VUE les recueille, les résume, les imporne.

Installer Easy && Import on Demand && tout en un seul endroit

Import à la demande

NPM Installer Babel-Plugin-Import --Save-Dev

babel.config.js

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

Importer des composants

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

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

échantillon

 < 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 > 

Configuration du projet

 npm install

Compiles et recharges à chaud pour le développement

 npm run serve

Compiles et minifie pour la production

 npm run build

Exécutez vos tests

 npm run test

Lints et corrige les fichiers

 npm run lint