单HTML文件集成vue3+ElementPlus的使用

1、新建一个HTML文件
2、HTML文件引用vue3.js
3、引用elementplus.js和elementplus.css
4、Vue初始化ElementPlus
5、页面中可以使用ElementPlus啦
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>

效果如下:
单HTML文件集成vue3+ElementPlus的使用_第1张图片

你可能感兴趣的:(vue3,ElementPlus)