单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/[email protected]"></script>
    <link rel="stylesheet" href="./css/[email protected]"></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 天前
uniapp主题切换功能,适配H5、小程序
前端·css·小程序·uni-app·vue3·主题切换
dr李四维5 天前
uniapp从 vue2 项目迁移到 vue3流程
javascript·vue.js·uni-app·vue3·vue2·vuex·vue迁移
化作繁星6 天前
tailwindcss如何修改elementplus的内部样式
vue.js·elementplus·tailwind css
Jiaberrr9 天前
Vue 3 中使用 vue - pdf - embed + vue3 - pdfjs 在线预览 PDF
前端·javascript·vue.js·前端框架·pdf·vue3
龙井>_<11 天前
vue3+Ts+elementPlus二次封装Table分页表格,表格内展示图片、switch开关、支持
前端·javascript·vue.js·elementplus
努力做大神11 天前
uniapp vue3项目定义全局变量,切换底部babar时根据条件刷新页面
uni-app·vue3
柒@宝儿姐13 天前
如何判断一个项目用的是哪个管理器
前端·javascript·vue.js·vue3
爱看书的小沐13 天前
【小沐学Web3D】three.js 加载三维模型(vue3)
javascript·vue·vue3·webgl·three.js·opengl·web3d
ScottePerk16 天前
element-plus文档解析之Layout布局(el-row,el-col)
前端·elementui·elementplus
山闻愚17 天前
创建Electron35 + vue3 + electron-builder项目,有很过坑,记录过程
vue3·electron35