【前端笔记】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 Centerel-menu-item>
                <el-sub-menu index="2">
                    <template #title>Workspacetemplate>
                    <el-menu-item index="2-1">item oneel-menu-item>
                    <el-menu-item index="2-2">item twoel-menu-item>
                    <el-menu-item index="2-3">item threeel-menu-item>
                    <el-sub-menu index="2-4">
                        <template #title>item fourtemplate>
                        <el-menu-item index="2-4-1">item oneel-menu-item>
                        <el-menu-item index="2-4-2">item twoel-menu-item>
                        <el-menu-item index="2-4-3">item threeel-menu-item>
                    el-sub-menu>
                el-sub-menu>
            el-menu>


            <el-button @click="show">我是 showel-button>
            <el-button @click="open2">我是 open2el-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)