2021-08-24 13:36:48 +08:00
|
|
|
# Démarrage rapide
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
Cette section décrit comment utiliser ElementPlus dans votre projet.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
## Utilisation des composants
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
### Introduction complète de tous les composants
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
> main.ts
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
```typescript
|
2020-11-23 16:28:06 +08:00
|
|
|
import { createApp } from 'vue'
|
2021-08-24 13:36:48 +08:00
|
|
|
import ElementPlus from 'element-plus'
|
|
|
|
|
import 'element-plus/dist/index.css'
|
|
|
|
|
import App from './App.vue'
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2020-10-16 11:14:34 +08:00
|
|
|
const app = createApp(App)
|
2021-08-24 13:36:48 +08:00
|
|
|
|
2020-10-16 11:14:34 +08:00
|
|
|
app.use(ElementPlus)
|
|
|
|
|
app.mount('#app')
|
2020-08-13 15:18:26 +08:00
|
|
|
```
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
### Introduction de composants à la demande
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-27 14:38:05 +08:00
|
|
|
Le code JS d'ElementPlus supporte par défaut le [tree shaking](https://webpack.js.org/guides/tree-shaking/)
|
|
|
|
|
basé sur les modules ES.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
> App.vue
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
```html
|
|
|
|
|
<template>
|
|
|
|
|
<el-button>
|
|
|
|
|
Je suis ElButton
|
|
|
|
|
</el-button>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
2021-08-27 14:38:05 +08:00
|
|
|
import { defineComponent } from 'vue'
|
|
|
|
|
import { ElButton } from 'element-plus'
|
|
|
|
|
|
|
|
|
|
export default defineComponent({
|
|
|
|
|
name: 'app'
|
|
|
|
|
components: {
|
|
|
|
|
ElButton,
|
|
|
|
|
},
|
|
|
|
|
})
|
2021-08-24 13:36:48 +08:00
|
|
|
</script>
|
2020-08-13 15:18:26 +08:00
|
|
|
```
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
### Introduction du style
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
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](https://www.cloudflare.com/learning/cdn/what-is-a-cdn/)
|
|
|
|
|
pour charger les fichiers de style, ce qui accélère le chargement de votre application.
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
Introduction par le biais de JS
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
```typescript
|
|
|
|
|
import 'element-plus/dist/index.css'
|
2021-03-27 19:18:36 +08:00
|
|
|
```
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
Introduit par les en-têtes HTML
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
```html
|
|
|
|
|
<!-- index.html -->
|
|
|
|
|
<head>
|
2021-08-27 14:38:05 +08:00
|
|
|
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
|
2021-08-24 13:36:48 +08:00
|
|
|
</head>
|
2020-08-13 15:18:26 +08:00
|
|
|
```
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
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](/#/fr-FR/component/quickstart#faqs)
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
## Modèle de projet de construction rapide
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
### Utilisez vue-cli@4.5
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
Nous avons préparé les plugins vue-cli correspondants pour la nouvelle version de
|
|
|
|
|
[Element Plus plugins](https://github.com/element-plus/vue-cli-plugin-element-plus)
|
|
|
|
|
que vous pouvez utiliser pour créer rapidement un projet basé sur les éléments suivants
|
|
|
|
|
Projet Element Plus.
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
### Utilisation du kit de démarrage
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-27 14:38:05 +08:00
|
|
|
Nous fournissons des [modèles de projet génériques ](https://github.com/element-plus/element-plus-starter)
|
2021-08-24 13:36:48 +08:00
|
|
|
que vous pouvez utiliser directement, et nous fournissons également les éléments
|
|
|
|
|
suivants vite [modèle](https://github.com/element-plus/element-plus-vite-starter).
|
|
|
|
|
Pour
|
|
|
|
|
Utilisateurs de Laravel,
|
|
|
|
|
nous disposons également d'un [modèle correspondant](https://github.com/element-plus/element-plus-in-laravel-starter)
|
|
|
|
|
que vous pouvez également télécharger et utiliser directement.
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
## 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.
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
Présentation complète d'ElementPlus.
|
2021-03-27 19:18:36 +08:00
|
|
|
|
|
|
|
|
```js
|
2021-08-24 13:36:48 +08:00
|
|
|
import { createApp } from 'vue'
|
2021-08-27 14:38:05 +08:00
|
|
|
import ElementPlus from 'element-plus'
|
|
|
|
|
import App from './App.vue'
|
2021-03-27 19:18:36 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
const app = createApp(App)
|
2021-08-27 14:38:05 +08:00
|
|
|
app.use(ElementPlus, { size: 'small', zIndex: 3000 })
|
2021-03-27 19:18:36 +08:00
|
|
|
```
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
Présentation d'ElementPlus à la demande.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
```js
|
2020-11-23 16:28:06 +08:00
|
|
|
import { createApp } from 'vue'
|
2021-08-27 14:38:05 +08:00
|
|
|
import { ElButton } from 'element-plus'
|
|
|
|
|
import App from './App.vue'
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2020-11-23 16:28:06 +08:00
|
|
|
const app = createApp(App)
|
2021-08-24 13:36:48 +08:00
|
|
|
app.config.globalProperties.$ELEMENT = option
|
2021-08-27 14:38:05 +08:00
|
|
|
app.use(ElButton)
|
2020-08-13 15:18:26 +08:00
|
|
|
```
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
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.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
## Utilisation de Nuxt.js
|
2020-11-23 16:28:06 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
Nous pouvons également utiliser [Nuxt.js](https://nuxtjs.org) pour.
|
2020-11-23 16:28:06 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
<div class="glitch-embed-wrap" style="height: 420px; width: 100%;">
|
|
|
|
|
<iframe src="https://glitch.com/embed/#!/embed/nuxt-with-element?path=nuxt.config.js&previewSize=0&attributionHidden=true" alt="nuxt-with-element on glitch" style="height: 100%; width: 100%; border: 0;"></iframe>
|
|
|
|
|
</div>
|
2020-11-23 16:28:06 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
## Démarrage
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
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.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
## Questions fréquemment posées
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
### Je veux introduire des composants et des styles à la demande en même temps.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
#### Chargement des styles à la demande en utilisant vite
|
2020-11-23 16:28:06 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
Si vous utilisez [vite](https://vitejs.dev) comme outil de compilation, vous devrez
|
|
|
|
|
d'abord installer `vite-plugin-element-plus` pour charger les styles à la demande.
|
|
|
|
|
|
|
|
|
|
```shell
|
|
|
|
|
yarn add vite-plugin-element-plus -D
|
|
|
|
|
# ou
|
|
|
|
|
npm install vite-plugin-element-plus -D
|
2020-08-13 15:18:26 +08:00
|
|
|
```
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
Ensuite, ajoutez le code suivant au fichier `vite.config.js` :
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
```typescript
|
|
|
|
|
import { defineConfig } from 'vite'
|
|
|
|
|
import vue from '@vitejs/plugin-vue'
|
|
|
|
|
import VitePluginElementPlus from 'vite-plugin-element-plus'
|
|
|
|
|
|
|
|
|
|
// https://vitejs.dev/config/
|
2021-08-27 14:38:05 +08:00
|
|
|
export default defineConfig(({ mode }) => {
|
2021-08-24 13:36:48 +08:00
|
|
|
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
|
2021-08-27 14:38:05 +08:00
|
|
|
format: mode === 'development' ? 'esm' : 'cjs',
|
2021-08-24 13:36:48 +08:00
|
|
|
}),
|
|
|
|
|
],
|
|
|
|
|
})
|
2020-08-13 15:18:26 +08:00
|
|
|
```
|
|
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
#### Chargement des styles à la demande avec webpack
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
Si vous utilisez webpack comme outil de compilation, vous devez d'abord
|
|
|
|
|
installer `babel-plugin-import` pour charger les styles à la demande.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
```shell
|
|
|
|
|
yarn add babel-plugin-import -D
|
|
|
|
|
# ou
|
|
|
|
|
npm install babel-plugin-import -D
|
|
|
|
|
```
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
Ensuite, vous devez ajouter le code suivant à votre fichier `babel.config.js`.
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
> babel.config.js
|
2020-08-13 15:18:26 +08:00
|
|
|
|
2021-08-24 13:36:48 +08:00
|
|
|
```javascript
|
2021-08-26 15:11:47 +08:00
|
|
|
module.exports = {
|
2021-08-24 13:36:48 +08:00
|
|
|
module.exports = {
|
|
|
|
|
plugins: [
|
|
|
|
|
[
|
|
|
|
|
"import",
|
|
|
|
|
{
|
|
|
|
|
libraryName: 'element-plus',
|
2021-08-26 15:11:47 +08:00
|
|
|
// import component
|
|
|
|
|
customName: (name) => {
|
|
|
|
|
name = name.slice(3)
|
|
|
|
|
return `element-plus/lib/components/${name}`
|
|
|
|
|
},
|
|
|
|
|
// import style
|
2021-08-24 13:36:48 +08:00
|
|
|
customStyleName: (name) => {
|
|
|
|
|
name = name.slice(3)
|
2021-08-26 15:11:47 +08:00
|
|
|
// 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`
|
2021-08-24 13:36:48 +08:00
|
|
|
// Si vous avez besoin du fichier [nom].css, vous devez renvoyer la ligne
|
|
|
|
|
// suivante
|
2021-08-26 15:11:47 +08:00
|
|
|
return `element-plus/lib/components/${name}/style/css`
|
2021-08-24 13:36:48 +08:00
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
2021-08-26 15:11:47 +08:00
|
|
|
]
|
|
|
|
|
}
|
2021-08-24 13:36:48 +08:00
|
|
|
```
|
