单HTML文件集成vue3+ElementPlus的使用

1、新建一个HTML文件

2、HTML文件引用vue3.js

3、引用elementplus.js和elementplus.css

4、Vue初始化ElementPlus

5、页面中可以使用ElementPlus啦

HTML文件例子如下:

html 复制代码
<html>

<head>
    <meta charset="UTF-8">
    <script src="./js/vue3.js"></script>
    <script src="./js/element-plus@2.8.0.js"></script>
    <link rel="stylesheet" href="./css/element-plus@2.8.0.css"></link>
</head>

<body>
    <div id="app">
        <p>{{title}}</p>
        <el-button @click="btnClick" type="primary">ElementPlus按钮</el-button>
    </div>

    <script>
        const { createApp } = Vue     

        const vue = createApp({
            setup(){
                const title = "vue3+elementPlus"
                const btnClick = () => {
                    console.log("btnClick")
                }
                return {
                    title,
                    btnClick
                }
            }
        })   

        vue.use(ElementPlus)
        vue.mount("#app")
    </script>
</body>

</html>

效果如下:

相关推荐
是梦终空8 小时前
计算机毕业设计264—基于Springboot+Vue3+协同过滤的房屋租赁管理系统(源代码+数据库+万字论文+设计文档)
spring boot·毕业设计·vue3·课程设计·毕业论文·协同过滤·房屋租赁管理系统
Irene19912 天前
通用消息组件 bug 修复及更好的实现是使用函数调用组件
vue3·函数调用·通用消息组件
Irene19913 天前
Vuex4:专为 Vue 3 设计,提供完整 TypeScript 支持
vue3·vuex4
无法长大3 天前
如何判断项目需不需要用、能不能用Tailwind CSS
前端·css·vue.js·elementui·vue3·tailwind css
cui_win4 天前
企业级中后台开源解决方案汇总
开源·vue3·ts
Sapphire~5 天前
Vue3-19 hooks 前端数据和方法的封装
前端·vue3
記億揺晃着的那天5 天前
Vue3 动态路由在生产环境才出现白屏的排查与解决(keep-alive 踩坑实录)
vue3·vue router·动态路由·生产环境报错
kong79069289 天前
Vue3快速入门
前端·vue3
无法长大10 天前
Mac M1 环境下使用 Rust Tauri 将 Vue3 项目打包成 APK 完整指南
android·前端·macos·rust·vue3·tauri·打包apk
淡笑沐白11 天前
Vue3使用ElementPlus实现菜单的无限递归
javascript·vue3·elementplus