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

效果如下:

相关推荐
小云小白2 天前
高性能 v-html 弹窗实现:Vue3 + Element Plus 最佳实践
vue3·弹窗·v-html
xun-ming3 天前
SpringBoot和Vue3实战阿里百炼大模型极简版
spring boot·ai·vue3·智能体·百炼大模型
哆啦A梦15884 天前
20, Springboot3+vue3实现前台轮播图和详情页的设计
javascript·数据库·spring boot·mybatis·vue3
小盼江4 天前
基于Springboot3+Vue3的协同过滤鲜花商城推荐系统
vue3·springboot3·鲜花商城
哆啦A梦15884 天前
11,Springboot3+vue3个人中心,修改密码
java·前端·javascript·数据库·vue3
哆啦A梦15885 天前
01, 前端vue3框架的快速搭建以及项目工程的讲解
前端·vue3·springboot
萧曵 丶9 天前
Vue3组件通信全方案
前端·javascript·vue.js·typescript·vue3
Json____9 天前
vue3-商城管理系统-前端静态网站
前端·vue3·ts·商城纯静态
吴声子夜歌14 天前
Vue3——网络框架Axios的应用
javascript·vue3·axios
吴声子夜歌15 天前
Vue3——UI组件库Element Plus(一)
vue.js·ui·elementplus