代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<!-- 复制于文件：https://unpkg.com/[email protected]/dist/vue.global.js -->
<script src="/vue3/vue.global.prod.js"></script>
<!-- 复制于文件：https://unpkg.com/[email protected]/dist/index.css -->
<link href="/element-plus_2.7.6/index.css">
<!-- 复制于文件：https://unpkg.com/[email protected]/dist/index.full.js -->
<script src="/element-plus_2.7.6/index.js"></script>
<!-- 复制于文件：https://unpkg.com/@element-plus/[email protected]/dist/index.iife.min.js -->
<script src="/element-plus_2.7.6/icon.js"></script>
<style>
/* 防止element某些组件在获得焦点时显示粗大黑边框 */
.el-tooltip__trigger:focus {
outline: none;
}
</style>
</head>
<body>
<h3>这是一个vu3、element-plus的例子页面</h3>
<hr>
<div id="app">
<el-button type="primary" @click="sayHello">say hello</el-button>
<h2>{{ text }}</h2>
<div>
<el-dropdown>
<span class="el-dropdown-link">
Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item :icon="Plus">Action 1</el-dropdown-item>
<el-dropdown-item :icon="CirclePlusFilled">
Action 2
</el-dropdown-item>
<el-dropdown-item :icon="CirclePlus">Action 3</el-dropdown-item>
<el-dropdown-item :icon="Check">Action 4</el-dropdown-item>
<el-dropdown-item :icon="CircleCheck">Action 5</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<script>
const { createApp, ref, onMounted } = Vue
const app = createApp({
setup() {
const text = ref('')
const sayHello = () => {
text.value = 'Hello world!'
}
return { sayHello, text }
}
})
app.use(ElementPlus)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.mount('#app')
</script>
</body>
</html>
标签：const,示例,text,app,component,element,html,Action From： https://www.cnblogs.com/jsper/p/18302677