新人练手,利用html引入element导航菜单,运行后无法正常显示菜单(显示结果如下图),使用的CDN引入element组件,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css">
<script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="app">
<el-button type="success">成功按钮</el-button>
<el-button @click="visible = true">Button</el-button> </div>
<div id="a">
<div class="line"></div>
<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>
</body>
<script type="text/javascript" >
const vm = new Vue({
el: '#app',
data(){
}
})
</script>
<script type="text/javascript" >
const vm = new Vue({
el: '#a',
data(){
}
})
</script>
</html>
困惑了好几天,不知原因在哪,请各位技术大佬帮忙指出原因,非常感谢!!!
![](http://tiebapic.baidu.com/forum/w%3D580/sign=954329088b1b9d168ac79a69c3dfb4eb/b1db9858d109b3de7f075fbf89bf6c81820a4cc7.jpg?tbpicau=2024-06-22-05_f2ecccf315960782317455d16c001211)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css">
<script src="https://lib.baomitu.com/vue/2.6.14/vue.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<div id="app">
<el-button type="success">成功按钮</el-button>
<el-button @click="visible = true">Button</el-button> </div>
<div id="a">
<div class="line"></div>
<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>
</body>
<script type="text/javascript" >
const vm = new Vue({
el: '#app',
data(){
}
})
</script>
<script type="text/javascript" >
const vm = new Vue({
el: '#a',
data(){
}
})
</script>
</html>
困惑了好几天,不知原因在哪,请各位技术大佬帮忙指出原因,非常感谢!!!
![](http://tiebapic.baidu.com/forum/w%3D580/sign=954329088b1b9d168ac79a69c3dfb4eb/b1db9858d109b3de7f075fbf89bf6c81820a4cc7.jpg?tbpicau=2024-06-22-05_f2ecccf315960782317455d16c001211)