【前端笔记】HTML 纯文件整理使用 Vue3 + element-plus + 字节cdn

HTML 纯文件整理使用 Vue3 + element-plus + 字节cdn

收藏下,方便用的到时,来此复制下.
本来打算尝试做成组件版的,但是尝试了几种方案都没成功,有知道如何做的,有空帮忙评论区里告知下,谢谢.
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 纯文件 整理 使用 Vue3 + element-plus + 字节cdn </title>
    <link href="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.min.css" type="text/css"
        rel="stylesheet" />
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js"
        type="application/javascript"></script>

    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"
        type="application/javascript"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/locale/zh-cn.min.js"
        type="application/javascript"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.min.js"
        type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/qs/6.10.3/qs.min.js"
        type="application/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0/echarts.min.js"
        type="application/javascript"></script>
</head>
<style>
    .flex-grow {
        flex-grow: 1;
    }
</style>

<body>
    <div id="app">
        <div>
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
                @select="handleSelect">
                <el-menu-item index="0">清风徐来</el-menu-item>
                <div class="flex-grow"></div>
                <el-menu-item index="1">Processing Center</el-menu-item>
                <el-sub-menu index="2">
                    <template #title>Workspace</template>
                    <el-menu-item index="2-1">item one</el-menu-item>
                    <el-menu-item index="2-2">item two</el-menu-item>
                    <el-menu-item index="2-3">item three</el-menu-item>
                    <el-sub-menu index="2-4">
                        <template #title>item four</template>
                        <el-menu-item index="2-4-1">item one</el-menu-item>
                        <el-menu-item index="2-4-2">item two</el-menu-item>
                        <el-menu-item index="2-4-3">item three</el-menu-item>
                    </el-sub-menu>
                </el-sub-menu>
            </el-menu>


            <el-button @click="show">我是 show</el-button>
            <el-button @click="open2">我是 open2</el-button>

            <el-date-picker v-model="value1" type="datetime" placeholder="请选择日期"
                format="YYYY/MM/DD HH:mm:ss"></el-date-picker>
        </div>

    </div>
    <script>
        const vue = Vue
        const createApp = Vue.createApp
        const ref = Vue.ref
        const el = ElementPlus
        const ElMessage = el.ElMessage

        const APP = {
            setup() {
                const open2 = () => {
                    ElMessage({
                        message: 'Congrats, this is a success message.',
                        type: 'success',
                    })
                }
                const show = () => {
                    ElMessage({
                        message: 'Im show.',
                        type: 'success',
                    })
                }
                const value1 = ref('')


                const activeIndex = ref('1')
                const handleSelect = (key, keyPath) => {
                    console.log(key, keyPath)
                }

                return {
                    show,
                    open2,

                    activeIndex,
                    handleSelect,

                    value1
                }
            }
        }

        const app = createApp(APP)
        app.use(ElementPlus, {
            locale: ElementPlusLocaleZhCn,
        })
        app.mount('#app')
    </script>
</body>


</script>
</body>

</html>
HTML 纯文件 整理 使用 Vue3 + element-plus + 字节cdn

HTML 纯文件整理使用 Vue3 + element-plus + 字节cdn
