這是元素加訊息框在我建立的最小頁面上的外觀：
我希望它看起來像 element-plus 文件中的那樣。
我將Vue與vite和ElementPlus一起使用。我從 vite 和 element plus 文件複製了設定。我玩了很多其他元素，它們都渲染正確。可以重現問題的最小 App.vue 元件：
<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>
我的vite.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: ''
})
頁面很小：
<!DOCTYPE html> <title>Vite + Vue</title> <div id="app"></div> <script type="module" src="/src/main.js"></script>
腳本也是如此：
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
最後是我的 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"
}
}
P粉0186537512023-11-24 00:19:03
如果您使用了“unplugin-auto-import/vite”和“unplugin-vue-components/vite”，則不需要：
P粉8335469532023-11-24 00:12:22
我想說文件解釋得不夠好 https://element -plus.org/en-US/guide/quickstart.html
#當使用 ElMessage 或 ElMessageBox 時，它們的樣式可能需要手動匯入。 快速啟動/按需導入部分沒有對此做任何說明，並且所有其他元素都可以開箱即用，因此有點令人困惑。
<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>