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

效果如下:

相关推荐
霸王蟹14 小时前
前端项目Excel数据导出同时出现中英文表头错乱情况解决方案。
笔记·学习·typescript·excel·vue3·react·vite
佚名猫5 天前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
技术闲聊DD7 天前
Vue3学习(4)- computed的使用
vue3·computed
蓝胖子的多啦A梦8 天前
Vue3 (数组push数据报错) 解决Cannot read property ‘push‘ of null报错问题
前端·vue3·push·数组数据
有梦想的攻城狮10 天前
从0开始学vue:vue3和vue2的关系
前端·javascript·vue.js·vue3·vue2
全栈小513 天前
【前端】Vue3+elementui+ts,TypeScript Promise<string>转string错误解析,习惯性请出DeepSeek来解答
前端·elementui·typescript·vue3·同步异步
西哥写代码15 天前
基于cornerstone3D的dicom影像浏览器 第二十七章 设置vr相机,复位视图
3d·vue3·vr·cornerstonejs
西哥写代码16 天前
基于cornerstone3D的dicom影像浏览器 第二十五章 自定义VR调窗工具
javascript·3d·vue3·vr·cornerstonejs
夏木。。。16 天前
vue+elementPlus实现表格展示序号并且翻页不重新排
vue.js·elementplus
放逐者-保持本心,方可放逐17 天前
浅谈 JavaScript 性能优化
开发语言·javascript·性能优化·vue3·v-memo·vue3性能优化·v-once