【HTML】页面引用Vue3和Element-Plus

在现代前端开发中，Vue 3 和 Element Plus 是非常受欢迎的技术。Vue 3 是一个用于构建用户界面的渐进式 JavaScript 框架，而 Element Plus 是一个基于 Vue 3 的组件库，提供了丰富的 UI 组件，帮助开发者快速构建高质量的前端应用。

在本文中，我们将通过一个简单的示例来演示如何在Html中引用 Vue 3 和 Element Plus。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="https://unpkg.com/vue"></script><link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" /><script src="https://unpkg.com/element-plus"></script>
</head><body><div id="app"><el-input v-model="text"></el-input><el-input v-model="text1"></el-input><el-input type="textarea" v-model="text2"></el-input><el-button type="primary" @click="onClick">测试</el-button></div><script>const { createApp, ref, reactive, toRefs } = Vue;const vue3Composition = {setup() {const text = ref('text')const onClick = () => {console.log(text.value, data.text1, data.text2);}const data = reactive({text1: 'text1',text2: 'text2',})const dataRef = toRefs(data);return {...dataRef,text,onClick}}}const app = createApp(vue3Composition).use(ElementPlus).mount('#app');</script>
</body></html>