单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 天前
37-实现地图配置项(完结)
echarts·vue3
凯小默3 天前
36-引入地图
echarts·vue3
凯小默4 天前
【TypeScript+Vue3+Vite+Vue-router+Vuex+Mock 进行 WEB 前端项目实战】学习笔记共 89 篇(完结)
typescript·echarts·mock·vue3·vite·vuex·vue-router
凯小默4 天前
34-监听数据渲染饼图以及饼图配置
vue3
凯小默5 天前
30-更新用户信息并且刷新表格
vue3
凯小默5 天前
27-编辑用户信息弹框组件化(显示隐藏功能)
vue3
凯小默6 天前
31-实现分配角色弹框(显示列表和选中当前用户的角色)
vue3
凯小默6 天前
29-定义用户对象类型(接口类型)
vue3
八目蛛6 天前
色盲测试小游戏
vue.js·vue3·html5
雪碧聊技术6 天前
前端项目代码发生改变,如何重新部署到linux服务器?
前端·vue3·centos7·代码更新,重新部署