Html使用Vue3+ElementPlus(图标 ElMessage)-526互联

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <script src="/static/js/vue.global.js"></script>
    <link rel="stylesheet" href="/static/element-plus@2.3.6/dist/index.css" />
    <script src="/static/element-plus@2.3.6/dist/index.full.js"></script>
    <script src="/static/js/jquery-2.2.4.js"></script>
    <script src="/static/icons-vue@2.1.0/dist/index.iife.min.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <div v-loading.fullscreen.lock="fullscreenLoading"></div>
</div>

<script>
    const { createApp, reactive, toRefs, ref, onMounted } = Vue;
    const app = createApp({
        setup() {
            //弹窗编辑
            const fullscreenLoading = ref(false);
            onMounted(() => {
				//可查看ElementPlus所有方法
                console.log({ElementPlus})
				ElementPlus.ElMessage({
					message: '警告',
					type: 'warning'
				});
            });
            //end
            return {
                fullscreenLoading
            };
        }
    });
	//使用图标
    app.component('Search',ElementPlusIconsVue.Search)
    app.component('Edit',ElementPlusIconsVue.Edit)
    app.component('Promotion',ElementPlusIconsVue.Promotion)
	//引入ElementPlus
    app.use(ElementPlus);
    app.mount("#app");
</script>
</body>
</html>