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

效果如下:

相关推荐
字节颤抖3 天前
vite+vue3开发uni-app时低版本浏览器不支持es6语法的问题排坑笔记
前端·uni-app·es6·vue3·vite·babel·兼容
前端熊猫5 天前
Vue 3 生命周期和生命周期函数
前端·javascript·vue.js·vue3·生命周期函数
西门吹雪~6 天前
【前端面试】在Vue3中,beforeMount和mounted钩子函数有什么区别?
前端·javascript·vue.js·前端框架·vue3
西门吹雪~7 天前
Vue3 从入门到精通:全面掌握前端框架的进阶之路
vue.js·前端框架·vue3
西门吹雪~8 天前
【前端框架】Vue3 中 `setup` 函数的作用和使用方式
前端·javascript·vue.js·前端框架·vue3
西门吹雪~8 天前
【前端框架】Vue3 面试题深度解析
前端·前端框架·vue·vue3·前端面试
西门吹雪~9 天前
【前端框架】vue2和vue3的区别详细介绍
前端·javascript·vue.js·前端框架·vue3·vue2
西门吹雪~9 天前
【前端框架】深入Vue 3组件开发:构建高效灵活的前端应用
前端·vue.js·前端框架·vue3
患得患失94911 天前
【前端】【面试】ref与reactive的区别
前端·面试·vue3
sakuraxiaoyu13 天前
MHTML文件如何在前端页面展示
前端·html·vue3·js·mhtml