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

效果如下:

相关推荐
猫猫村晨总13 小时前
基于 Vue3 + Canvas + Web Worker 实现高性能图像黑白转换工具的设计与实现
前端·vue3·canvas
上官熊猫20 小时前
nuxt3项目打包部署到服务器后配置端口号和开启https
前端·vue3·nuxt3
璇璇吴1 天前
vue3 el-form表格滚动
javascript·vue3·elementplus
放逐者-保持本心,方可放逐8 天前
vue2 升级为 vue3+第三方库升级+vue2与vue3混合交互
vue3·vue2·交互·项目升级·第三方库升级
花铛12 天前
《Vue3 八》<script setup> 语法
vue3
想要打 Acm 的小周同学呀12 天前
若依框架--数据字典设计使用和前后端代码分析
java·vue3·数据字典·若依
飞雪金灵14 天前
Vue3(elementPlus) el-table替换/隐藏行箭头,点击整行展开
前端·vue3·element-plus·隐藏table箭头·替换table展开箭头·点击整行展开
xiangxiongfly91515 天前
Vue3 自定义插件(plugin)
vue3·插件·plugin
猫猫村晨总15 天前
前端图像处理实战: 基于Web Worker和SIMD优化实现图像转灰度功能
前端·图像处理·vue3·canvas·web worker
theMuseCatcher16 天前
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
ui·typescript·vue3·vite·components