Beginilah rupa elemen ditambah kotak mesej pada halaman minimum yang saya bina:
Saya mahu ia kelihatan seperti dalam dokumentasi elemen-tambah.
Saya menggunakan Vue dengan vite dan ElementPlus. Saya menyalin tetapan daripada dokumentasi vite dan elemen ditambah. Saya bermain dengan banyak elemen lain dan semuanya diberikan dengan betul. Komponen App.vue minimum yang boleh menghasilkan semula masalah:
<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>
Sayavite.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: ''
})
Halaman itu kecil:
<!DOCTYPE html> <title>Vite + Vue</title> <div id="app"></div> <script type="module" src="/src/main.js"></script>
Begitu juga dengan skrip:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Yang terakhir adalah milik saya 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] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Tidak diperlukan jika anda menggunakan "unplugin-auto-import/vite" dan "unplugin-vue-components/vite":
Saya akan katakan dokumentasi tidak menerangkannya dengan cukup baik https://element -plus.org/en-US/guide/quickstart.html
Apabila menggunakan
ElMessage或ElMessageBoxgaya mereka mungkin perlu diimport secara manual. Bahagian Mula Pantas/Import Atas Permintaan tidak menyatakan apa-apa tentang perkara ini, dan semua elemen lain berfungsi di luar kotak, jadi ia agak mengelirukan.<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>