单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>

效果如下:

相关推荐
码视野1 天前
基于 Spring Boot + Vue3 的【大学英语四六级 (CET-4/6) 作文智能评分与句式润色系统】设计与实现(含PRD/三端高保真源码/大屏)
java·前端·人工智能·spring boot·后端·vue3
码视野2 天前
基于 Spring Boot + Vue3 的【高校化学实验室安全准入考试与危化品配伍排查系统】设计与实现(含PRD/三端高保真源码/大屏)
前端·人工智能·spring boot·后端·安全·vue3
fxshy2 天前
WebGIS 游戏化实践:基于 Cesium + Vue3 实现全球飞行模拟系统:从球体坐标、飞行动力学到地形碰撞实战
游戏·vue3·cesium·webgis·飞行模拟
jonyleek3 天前
技术实践:基于 Vue3 + Spring Cloud 微服务实现私有化文档系统的类 SaaS 协同体验
微服务·私有化部署·vue3·springcloud·协同编辑·jvs企业文档·无忧企业文档
码视野3 天前
基于 Vue3 + Element Plus 的【智慧社区洗车养车与上门流动洗车预约调度系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
码视野3 天前
基于 Vue3 + Element Plus 的【无人值守共享自习室与空间智能预约系统】设计与实现(含PRD/三端源码/大屏)
前端·javascript·vue.js·人工智能·vue3
码视野3 天前
基于 Vue3 + Element Plus 的【基于 Vue3 的智慧健身房会员管理与私教团课预约核销系统】设计与实现(附完整源码与PRD)
前端·vue3
码视野3 天前
基于 Vue3 + Element Plus 的【青少年心理健康智能测评与 AI 情绪树洞陪护干预系统】设计与实现(含PRD/三端源码/大屏)
前端·vue.js·人工智能·vue3
码视野3 天前
基于 Vue3 + Element Plus 的【微短剧剧本智能创作与分镜生产协同系统】设计与实现(含PRD/三端源码/大屏)
前端·人工智能·vue3
码视野3 天前
基于 Vue3 + Element Plus 的【智慧新能源汽车充电桩运维调度与分时共享租赁系统】设计与实现(附完整源码与PRD)
运维·人工智能·汽车·vue3