cdn方式使用vue和element-ui进行前端开发

本文介绍了如何通过CDN方式快速安装Vue.js和Element-UI，强调了引入顺序的重要性。然后展示了测试安装成功的步骤，以及如何在Vue环境中创建和初始化一个简单的菜单应用。最后，给出了一个具体的Element-UI水平菜单的例子，显示了成功运行的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

按照vue和element-ui的官网开发指南中提供的cdn安装方式，直接以script方式引入。
要注意引入顺序

 <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

测试是否安装成功

    <script>
        console.log(ELEMENT)
    </script>

在浏览器中预览，查看控制台如下即安装成功
在这里插入图片描述

正式使用

插入代码，用一个

包裹，并初始化app

<script>
    new Vue({
        el: '#app',
        })
</script>

例子

<div id="app">
<el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
    </el-submenu>
    <el-menu-item index="3" disabled>消息中心</el-menu-item>
    <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
</el-menu>
</div>