单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快速构建项目+router、vuex、scss安装
前端·css·vue3·vite·scss
行思理3 天前
UniApp 从Vue2升级为Vue3需要注意哪些方面
javascript·vue.js·uni-app·vue3·vue2
唯之为之5 天前
vue3项目部署到Github
vue·github·pnpm·vue3·vite
一雨方知深秋6 天前
vue3 项目中使用git
css·git·gitee·html·vue3
陈逸子风6 天前
.net core8 使用Swagger(附当前源码)
vue3·webapi·权限·流程
奶昔不会射手6 天前
vue3项目,本地页面正常显示,打包后页面空白
vue3·vue-router
Modify_QmQ6 天前
leaflet【十】实时增加轨迹点轨迹回放效果实现
vue3·leaflet·轨迹回放·实时增加轨迹
开心小老虎7 天前
vue3_对接腾讯_实时音视频
vue3·实时音视频·腾讯
xiezhr8 天前
喜欢干净简洁音乐播放器的朋友看过来
vue·github·vue3·开源软件·音乐播放器·网易云音乐
鱼是一只鱼啊11 天前
.NetCore+vue3上传图片 Multipart body length limit 16384 exceeded.
.netcore·vue3·图片上传·el-upload