单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 天前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3
Wiktok12 天前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
Wiktok12 天前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
Wiktok13 天前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
知识分享小能手14 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Wiktok14 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
Jinuss15 天前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
知识分享小能手15 天前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
哆啦A梦158815 天前
uniapp分包实现
前端·vue.js·uni-app·vue3
叫我阿柒啊16 天前
从Java全栈到前端框架的实战之路
java·数据库·微服务·typescript·前端框架·vue3·springboot