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

效果如下:

相关推荐
赵庆明老师2 天前
vben开发入门6:tsconfig.json
json·vue3·vben
赵庆明老师2 天前
vben开发入门5:vite.config.ts
前端·html·vue3·vben
沙振宇3 天前
【Web】使用Vue3+PlayCanvas开发3D游戏(十二)渲染PCD点云可视化模型
3d·vue3·点云·pcd
是席木木啊6 天前
告别console.log!Vue3项目日志框架选型指南
前端·vue3·日志框架
程序员-南6 天前
解决 Vue3 中 keep-alive 缓存问题的方法
缓存·vue3
qq_12084093717 天前
Three.js 模型加载稳定性实战:从资源失败到可用发布的工程化方案
前端·javascript·vue.js·vue3·three.js
qq_12084093717 天前
Three.js 模型加载与线上稳定性实战:路径、跨域、缓存与降级全链路指南
开发语言·javascript·缓存·vue3
qq_12084093717 天前
Vue3 + Three.js 实战入门:从零搭建可交互3D场景(含模型加载与性能优化)
javascript·3d·vue3·交互
qq_12084093717 天前
Vue3 + Three.js 入门实战:从 0 到 1 搭建可交互的 3D 场景(含模型加载与性能优化)
javascript·3d·vue3·交互·webgl·gltf
曲幽8 天前
Vue 3 组件通信,别只会用 Props 和 Emits 了,这几个狠活儿你得看看
vue3·inject·provide·pinia·v-model·props·mitt·emit