Comment utiliser le composant élément dans la page vue (étapes)

Vue est un framework de développement frontal populaire créé par l'équipe Element d'une entreprise nationale bien connue. Element est un ensemble de bibliothèques de composants de bureau basés sur Vue 2.0. Il suit les normes de conception Material Design et fournit des styles de composants riches et riches. Il offre une bonne expérience d'interaction utilisateur et est très approprié pour créer une interface utilisateur plus pratique et plus belle. Alors, comment utiliser le composant Element dans la page Vue ? Apprenons ensemble ensuite.

1. Installer la bibliothèque de composants Element

Avant d'utiliser Element, nous devons d'abord l'installer. Entrez le répertoire du projet dans le terminal et exécutez la commande suivante pour installer Element :

npm i element-ui -S

Le -S ici signifie que nous installerons Element comme environnement dépendant du projet. Si vous utilisez Yarn, la ligne de commande doit être :

.

yarn add element-ui

Installation terminée Enfin, nous introduisons Element dans main.js :

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

Vue.use(ElementUI)

La méthode Vue.use ici est utilisée pour enregistrer le plug-in Element afin que nous puissions utiliser le composant Element dans le projet Vue.

2. Utilisation du composant Element

Par la suite, dans notre page Vue, nous pourrons introduire le composant Element pour utiliser les différents composants qu'il fournit. Par exemple, lorsque nous avons besoin d'utiliser un bouton, nous pouvons écrire le code suivant directement dans le code :

<template>
  <div>
    <el-button>按钮</el-button>
  </div>
</template>

Le el-button ici est le composant bouton défini dans le plug-in Element. Dans ce processus, nous pouvons sélectionner librement les composants dont nous avons besoin et les insérer dans le code du projet pour obtenir l'effet interactif de pages complexes.

3. Thème personnalisé

Element fournit de nombreux composants de base, mais si vous rencontrez des situations dans le projet qui nécessitent une personnalisation de la couleur, de la taille, de la police, etc., vous pouvez également personnaliser le thème très facilement. La personnalisation des thèmes peut être divisée de deux manières : en modifiant les paramètres et en remplaçant les styles.

3.1 Modifier les paramètres

Définissez les paramètres séparément dans le projet, qui seront efficaces pour les composants globaux, y compris les composants Element et les composants personnalisés.

$--color-primary: #1ED2EB;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;

@import './node_modules/element-ui/packages/theme-chalk/src/index';

3.2 Remplacer le style

Remplacez le style généré par $style en modifiant le style global.

Tout d'abord, nous devons télécharger le package de thème Element en local via la commande suivante :

npm i element-theme -S

Une fois le téléchargement terminé, nous pouvons choisir un package de thème Element pour commencer à compiler notre propre thème, par exemple, nous avons sélectionné celui par défaut. thème d’Element.

Ajoutez le contenu suivant dans main.js :

import ET from 'element-theme'

ET.theme('default', {
  // your styles here
})

La méthode ET.theme est utilisée pour compiler et générer un thème personnalisé, où default représente le nom du thème que nous souhaitons modifier, vous pouvez personnaliser le nom ici. Il est important de noter que lors de l'écriture de thèmes à l'aide de ET.theme, vous devez suivre la syntaxe Less.

Si vous souhaitez utiliser différents thèmes personnalisés sur différentes pages, vous pouvez ajouter un fichier de style et définir un thème distinct pour chaque page. Par exemple, si nous voulons lancer un thème rose dans login.vue, nous pouvons écrire le code suivant :

// login.vue
<style lang="scss">
  @import '/element-variables.scss';

  $--color-primary: #ff54a9;
  $--color-success: #67C23A;
  $--color-warning: #E6A23C;
  $--color-danger: #F56C6C;

  @import './node_modules/element-ui/packages/theme-chalk/src/index';
</style>

Ce qui précède est le contenu de base de l'utilisation du composant Element dans la page Vue. Bien entendu, la bibliothèque de composants Element contient de nombreux autres composants, tels que des tableaux, des paginations, des messages, des boîtes de dialogue, etc. L'utilisation de ces composants peut être trouvée dans la documentation d'Element. Après avoir comment insérer et utiliser des composants, nous pouvons utiliser des thèmes personnalisés pour modifier les couleurs et les styles afin d'ajouter plus de beauté et d'interactivité à la page. J'espère que cet article vous sera utile pour apprendre Vue et Element.

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!