Voici à quoi ressemble l'élément plus la boîte de message sur une page minimale que j'ai construite :
Je veux qu'il ressemble à celui de la documentation element-plus.
J'utilise Vue avec vite et ElementPlus. J'ai copié les paramètres de vite et element plus la documentation. J'ai joué avec beaucoup d'autres éléments et ils ont tous été rendus correctement. Composant App.vue minimal pouvant reproduire le problème :
<template>
<el-button text @click="open">Click to open the Message Box</el-button>
</template>
<script setup>
import { ElMessageBox } from 'element-plus'
const open = () => {
ElMessageBox.alert('This is a message', 'Title', {
confirmButtonText: 'OK'
})
}
</script>
Monvite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
})
],
base: ''
})
La page est petite :
<!DOCTYPE html> <title>Vite + Vue</title> <div id="app"></div> <script type="module" src="/src/main.js"></script>
Il en va de même pour le script :
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Le dernier est à moi package.json :
{
"name": "v2",
"private": true,
"version": "0.0.0",
"main": "main.js",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"start": "electron ."
},
"dependencies": {
"electron": "^20.0.2",
"element-plus": "^2.2.12",
"vue": "^3.2.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.2",
"unplugin-auto-import": "^0.11.1",
"unplugin-vue-components": "^0.22.4",
"vite": "^3.0.6"
}
}
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Non requis si vous avez utilisé "unplugin-auto-import/vite" et "unplugin-vue-components/vite" :
Je dirais que la documentation ne l'explique pas assez bien https://element -plus.org/en-US/guide/quickstart.html
Lors de l'utilisation de
ElMessage或ElMessageBoxleurs styles peuvent devoir être importés manuellement. La section Démarrage rapide/Importation à la demande ne dit rien à ce sujet, et tous les autres éléments fonctionnent immédiatement, donc c'est un peu déroutant.<template> <el-button text @click="open">Click to open the Message Box</el-button> </template> <script setup> import { ElMessageBox } from 'element-plus'; import 'element-plus/es/components/message/style/css'; // this is only needed if the page also used ElMessage import 'element-plus/es/components/message-box/style/css'; const open = () => { ElMessageBox.alert('This is a message', 'Title', { confirmButtonText: 'OK' }) } </script>