Comment intégrer le framework CSS dans Vue ? Présentation de la méthode

La colonne Tutoriel Vue.js suivante vous présentera comment intégrer le framework CSS dans Vue.js. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Les frameworks CSS sont excellents pour de nombreuses raisons : par exemple, le code est plus facile à comprendre, les applications Web sont plus faciles à maintenir et ils simplifient les étapes de mise en œuvre des prototypes. D'une manière générale, la méthode d'intégration des frameworks CSS dans VUE est la même. Cet article prend comme exemple le largement utilisé Bootstrap 4.

Préparation

Avant de télécharger le framework CSS, créez un nouveau projet avec Vue CLI :

npm install vue-cli
vue init webpack project-name

Installez et intégrez Bootstrap 4

Après avoir créé et initialisé le nouveau projet Vue, utilisez npm pour télécharger Bootstrap 4. Étant donné que le JavaScript de Bootstrap 4 dépend de jQuery, jQuery doit également être installé.

npm install bootstrap jquery --save

Vous devez ajouter la dépendance Bootstrap dans le fichier main.js de votre Vue afin qu'elle puisse être utilisée globalement dans toute l'application.

import './../node_modules/jquery/dist/jquery.min.js';
import './../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './../node_modules/bootstrap/dist/js/bootstrap.min.js';

Si la construction de votre application ne parvient pas, vous devez installer la dépendance popper.js. Il ne devrait y avoir aucune erreur après cela.

npm install --save popper.js

De cette façon, Bootstrap 4 est intégré à Vue.

Installer et intégrer Bulma

Bulma est un framework CSS léger et flexible basé sur Flexbox. Il compte plus de 25 000 étoiles sur GitHub.

Contrairement à Bootstrap, Bulma ne contient que du CSS et n'a aucune dépendance sur jQuery ou JavaScript.

Installer Bulma :

npm install bulma

Après avoir téléchargé Bulma, ouvrez votre main.js et importez-le.

/* main.js */
import './../node_modules/bulma/css/bulma.css';

Cela intègre Bulma dans votre programme Vue.js.

Installer et intégrer Foundation

Foundation est un excellent framework CSS. Il comporte deux cadres : un pour le courrier électronique et un pour le site Web. Ce dont nous avons besoin, c'est du framework Foundation Sites, puisque nous ne nous soucions que de l'utilisation de Foundation sur le Web.

Installez Foundation Sites et importez-le dans votre fichier main.js :

$ npm install foundation-sites --save

Importez-le dans votre fichier main.js :

/* main.js */
import './../node_modules/foundation-sites/dist/css/foundation.min.css';
import './../node_modules/foundation-sites/dist/js/foundation.min.js';

Bonnes pratiques dans Vue

Les trois frameworks ci-dessus sont très similaires : ils créent tous des "grilles" basées sur des lignes et des colonnes, que vous pouvez utiliser pour créer une interface utilisateur. Les grilles facilitent la modification de la largeur d'une colonne en fonction de la largeur de l'appareil, simplement en ajoutant ou en modifiant la classe attachée à l'élément.

Remarque : L'exemple suivant utilise Bootstrap4. Mais cette approche basée sur les frameworks de lignes et de colonnes s’applique à tous les frameworks CSS.

Il est préférable d'utiliser des classes framework autant que possible. Pour faciliter l'utilisation, ces frameworks sont soigneusement conçus pour être extensibles et personnalisables. Au lieu de créer vos propres boutons avec vos propres classes, vous pouvez utiliser Bootstrap, Bulma ou Foundation pour faire la même chose.

<!-- Bootstrap -->
<button class="btn btn-primary btn-lg">Bootstrap 大按钮</button>

<!-- Bulma -->
<button class="button is-primary is-large">Bulma 大按钮</button>

Vous pouvez configurer chaque couleur pour que btn-primary (Bootstrap) ou is-primary (Bulma) fasse référence à la couleur de votre propre style, plutôt que d'utiliser les couleurs par défaut fournies avec Bootstrap et Bulma.

Si vous devez utiliser vos propres styles pour créer votre propre thème, vous pouvez créer une feuille de style globale qui remplace les styles globaux du framework car nous ne souhaitons pas modifier directement le framework.

Créez votre propre style

Si vous souhaitez créer votre propre thème CSS, vous devez d'abord créer un nouveau fichier CSS et le mettre dans le répertoire assets puis importez-le dans le fichier App.vue.

/* App.vue */
import '@/assets/styles.css';
...

Essayez de mapper certains styles par défaut qui correspondent aux vôtres avec les composants Bootstrap :

/* styles.css */
/* Buttons
--------------------------- */
.btn-primary   { background: #00462e; color: #fff; } /* dark green */
.btn-secondary { background: #a1b11a; color: #fff; } /* light green */
.btn-tertiary  { background: #00b2e2; color: #fff; } /* blue */
.btn-cta       { background: #f7931d; color: #fff; } /* orange */

/* Forms
--------------------------- */
.form-control {
  border-radius: 2px;
  border: 1px solid #ccc;
}

.form-control:focus,
.form-control:active {
  outline: none;
  box-shadow: none;
  background: #ccc;
  border: 1px solid #000;
}

Faites attention à la réutilisabilité des composants

Lors de l'utilisation de frameworks CSS dans Vue.js, il est important de garder à l'esprit la réutilisabilité des composants. Nous ne pouvons pas mélanger le CSS de mise en page avec le composant lui-même. Parfois, vous devrez peut-être simplement réutiliser ce composant, et d'autres fois, vous aurez peut-être besoin d'une mise en page différente.

Mauvais exemple

<!--Navigation.vue-->
<template>
  <p class="row">
    <p class="col">
      <nav>
        <ul>
          <li><a href="#">Navigation Item #1</a></li>
          <li><a href="#">Navigation Item #2</a></li>
          <li><a href="#">Navigation Item #3</a></li>
        </ul>
      </nav>
    </p>
  </p>
</template/>

rrree

Ce composant peut être utilisé à la fois dans l'en-tête et le pied de page. Ils doivent avoir un aspect différent mais contenir les mêmes informations. Supprimons la mise en page HTML et déplaçons-la vers son composant parent ou de base.

Bon exemple

<!--App.vue-->
<template>
  <p>
    ...
    <Navigation/>
  </p>
</template/>

<!--Navigation.vue-->
<template>
  <nav>
    <ul>
      <li><a href="#">Navigation Item #1</a></li>
      <li><a href="#">Navigation Item #2</a></li>
      <li><a href="#">Navigation Item #3</a></li>
    </ul>
  </nav>
</template/>

Résumé

Le framework CSS facilite notre travail de développement . Ils rendent le code de votre modèle cohérent et facile à maintenir et à écrire. Vous pouvez vous concentrer sur les fonctionnalités et la conception globale du programme au lieu de perdre du temps sur des tâches courantes, telles que la création de boutons à partir de zéro.

Bootstrap, Bulma et Foundation ne sont que trois frameworks couramment utilisés, mais ils ne se limitent pas à ceux-ci. Il existe également de nombreux frameworks à explorer, tels que Semantic UI et UI Kit, etc.

Adresse originale en anglais : https://www.digitalocean.com/community/tutorials/vuejs-css-frameworks-vuejs

Auteur : Dave Berning

Recommandations associées :

Résumé des questions d'entretien Vue frontale 2020 (avec réponses)

Recommandations du didacticiel Vue : 2020 derniers 5 A sélection de didacticiels vidéo vue.js

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours de programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!