Comment référencer la bibliothèque de composants dans le projet vue

Vue est un framework front-end très populaire dans le développement Internet actuel. Sa méthode de développement basée sur les composants peut améliorer efficacement la maintenabilité et l'efficacité du développement du projet. Dans le développement du projet Vue, nous utilisons souvent des bibliothèques de composants tiers pour créer rapidement diverses interactions et éléments de page. Cet article explique comment référencer les bibliothèques de composants dans les projets Vue.

1. Bibliothèques de composants couramment utilisées

Il existe de nombreuses bibliothèques de composants utilisées dans les projets Vue, les plus courantes sont les suivantes :

1. Element-UI : une bibliothèque de composants d'interface utilisateur basée sur Vue 2.0, comprenant un grand nombre de composants couramment utilisés. composants utilisés Composants, tels que boutons, tableaux, fenêtres contextuelles, sélecteurs de date, etc.
2. Ant Design of Vue : une version Vue de Ant Design, qui fournit un ensemble de belles bibliothèques de composants.
3. Vuetify : une bibliothèque de composants Vue basée sur Material Design, fournissant une série de composants magnifiques et riches.
4. Vue Material : une autre bibliothèque de composants Vue basée sur Material Design, fournissant une solution de composants d'interface utilisateur complète, rigoureuse et professionnelle.

2. Comment référencer la bibliothèque de composants

Avant de commencer à utiliser la bibliothèque de composants, vous devez installer les fichiers de bibliothèque correspondants et les introduire dans le projet. En prenant la bibliothèque de composants Element-UI comme exemple, nous présenterons comment introduire la bibliothèque de composants dans le projet Vue.

1. Installer Element-UI

Vous pouvez exécuter la commande suivante dans la ligne de commande du terminal pour installer :

npm i element-ui -S

2. Introduire Element-UI

Dans le projet Vue, si vous souhaitez utiliser les composants Element-UI dans sur la page, vous devez introduire Element-UI dans le fichier main.js :

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Introduisez d'abord Element-UI via l'instruction d'importation, puis injectez-le dans l'instance Vue via la méthode Vue.use(). Il convient de noter que le fichier de style CSS d'element-ui doit également être introduit, sinon il ne s'affichera pas correctement sur la page.

Si vous souhaitez uniquement utiliser certains composants d'Element-UI, vous pouvez créer un nouveau fichier element-ui.js dans le dossier des composants, y introduire les composants requis, puis l'introduire dans le fichier .vue qui doit utiliser le composant .

Par exemple, pour utiliser le composant el-dialog d'Element-ui, créez un nouveau fichier element-ui.js :

import Vue from 'vue'
import { Dialog } from 'element-ui'

Vue.use(Dialog)

Puis introduisez-le dans le fichier .vue qui doit utiliser le composant el-dialog :

<template>
  <el-dialog></el-dialog>
</template>

<script>
  import 'element-ui/lib/theme-chalk/dialog.css';
  import Dialog from "@/components/element-ui";
  
  export default {
    components: {
      'el-dialog': Dialog.Dialog
    }
  }
</script>

Ici, vous devez introduire le fichier de style dialog.css d'element-ui, introduire le composant Dialog via l'instruction d'importation et l'enregistrer dans l'instance Vue actuelle. Dans l'option .components, mappez le composant el-dialog à Dialog.Dialog et vous pourrez utiliser le composant el-dialog dans la page.

3. Résumé

L'utilisation de bibliothèques de composants tiers dans les projets Vue est un bon moyen d'améliorer l'efficacité du développement et d'améliorer la beauté du site Web. Cet article explique comment présenter la bibliothèque de composants Element-UI. Les lecteurs peuvent choisir d'autres bibliothèques de composants en fonction de leurs propres besoins et les présenter et les utiliser de la même manière.

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!