mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-15 01:41:20 +08:00

* style: use prettier

* style: just prettier format, no code changes

* style: eslint fix
object-shorthand, prefer-const

* style: fix no-void

* style: no-console

2021-09-04 19:29:28 +08:00

6.6 KiB

Raw Blame History

Démarrage rapide

Cette section décrit comment utiliser ElementPlus dans votre projet.

Utilisation des composants

Introduction complète de tous les composants

main.ts

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

Introduction de composants à la demande

Le code JS d'ElementPlus supporte par défaut le tree shaking basé sur les modules ES.

App.vue

<template>
  <el-button> Je suis ElButton </el-button>
</template>
<script>
  import { defineComponent } from 'vue'
  import { ElButton } from 'element-plus'

  export default defineComponent({
    name: 'app'
    components: {
      ElButton,
    },
  })
</script>

Introduction du style

Nous recommandons fortement d'apporter les fichiers de style complets directement, bien que cela puisse sembler augmenter la taille de l'application entière, cela évite d'introduiredes plugins d'outils de packaging supplémentaires (moins de charge) et vous pouvez également utiliser le CDN pour charger les fichiers de style, ce qui accélère le chargement de votre application.

Introduction par le biais de JS

import 'element-plus/dist/index.css'

Introduit par les en-têtes HTML

<!-- index.html -->
<head>
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
</head>

Si vous souhaitez que les styles soient également introduits à la demande, vous pouvez y faire référence en utilisant le plug-in fourni par l'outilcorrespondant. Voir FAQ

Modèle de projet de construction rapide

Utilisez vue-cli@4.5

Nous avons préparé les plugins vue-cli correspondants pour la nouvelle version de Element Plus plugins que vous pouvez utiliser pour créer rapidement un projet basé sur les éléments suivants Projet Element Plus.

Utilisation du kit de démarrage

Nous fournissons des modèles de projet génériques que vous pouvez utiliser directement, et nous fournissons également les éléments suivants vite modèle. Pour Utilisateurs de Laravel, nous disposons également d'un modèle correspondant que vous pouvez également télécharger et utiliser directement.

Configuration globale

Lors de l'introduction d'Element Plus, un objet de configuration globale peut être transmis. Cet objet supporte actuellement les champs size et zIndex. size permet de modifier la taille par défaut du composant et zIndex définit le z-index initial de la boîte pop-up (valeur par défaut : 2000). L'élément Plus est présenté sur demande comme suit.

Présentation complète d'ElementPlus.

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000 })

Présentation d'ElementPlus à la demande.

import { createApp } from 'vue'
import { ElButton } from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.$ELEMENT = option
app.use(ElButton)

Avec les paramètres ci-dessus, tous les composants du projet ayant la propriété size auront une taille par défaut de 'small' et l'index z initial de la boîte pop-up sera de 3000.

Utilisation de Nuxt.js

Nous pouvons également utiliser Nuxt.js pour.

Démarrage

Maintenant qu'un environnement de développement basé sur Vue et Element Plus a été mis en place, il est temps d'écrire du code. Consultez la documentation de chaque composant pour savoir comment les utiliser.

Questions fréquemment posées

Je veux introduire des composants et des styles à la demande en même temps.

Chargement des styles à la demande en utilisant vite

Si vous utilisez vite comme outil de compilation, vous devrez d'abord installer vite-plugin-element-plus pour charger les styles à la demande.

yarn add vite-plugin-element-plus -D
# ou
npm install vite-plugin-element-plus -D

Ensuite, ajoutez le code suivant au fichier vite.config.js :

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VitePluginElementPlus from 'vite-plugin-element-plus'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  plugins: [
    vue(),
    VitePluginElementPlus({
      // Si vous devez utiliser le fichier source [nom du composant].scss, vous
      // devez le décommenter ci-dessous.
      // Pour toutes les API, vous pouvez consulter la documentation à l'adresse
      // https://github.com/element-plus/vite-plugin-element-plus.
      // pour les commentaires de la documentation
      // useSource: true
      format: mode === 'development' ? 'esm' : 'cjs',
    }),
  ],
})

Chargement des styles à la demande avec webpack

Si vous utilisez webpack comme outil de compilation, vous devez d'abord installer babel-plugin-import pour charger les styles à la demande.

yarn add babel-plugin-import -D
# ou
npm install babel-plugin-import -D

Ensuite, vous devez ajouter le code suivant à votre fichier babel.config.js.

babel.config.js

module.exports = {
module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        // import component
        customName: (name) => {
          name = name.slice(3)
          return `element-plus/lib/components/${name}`
        },
        // import style
        customStyleName: (name) => {
          name = name.slice(3)
           // Si vous avez besoin du fichier [nom].scss, vous devez commenter la
          // ligne de code précédente et décommenter la ligne de code suivante.
          // return `element-plus/lib/components/${name}/style`
          // Si vous avez besoin du fichier [nom].css, vous devez renvoyer la ligne
          // suivante
          return `element-plus/lib/components/${name}/style/css`
        },
      },
    ],
  ]
}

6.6 KiB Raw Blame History