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

菲宇

发布于 2022-05-13 13:34:34

9230

发布于 2022-05-13 13:34:34

文章被收录于专栏：菲宇

安装

按照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>

结果如图