vue2.0+element-ui多级导航菜单
⾃从⽤饿了么框架重构项⽬以来，遇到 很多问题，我都有⼀⼀记录下来，现在特喜欢这个框架，说实话，如果你是⽤了vue这个技术栈的话，⼀定要⽤饿了么的pc端框架哦，遇到问题的时候在⽹上百度⼀下，就能到解决⽅案，还有很多社区可以讨论，社区⽂档都⽐较成熟，很容易上⼿~~
开发相关资料⽂档：
1：安装node
2：查看node的版本号
3：安装淘宝npm镜像
4：安装全局vue-cli脚⼿架
上⾯是准备⼯作，搭建开发环境，准备完后之后，就可以继续构建项⽬了.
5：开始进⼊主题，初始化⼀个vue项⽬
我这⾥是在d盘⾥⾯新建⼀个项⽬，先⽤d：的命令，回车键进⼊d盘；回车键默认创建项⽬信息。
vue init webpack itemname
image
出现这样的提⽰，初始化成功
image
根据提⽰输⼊运⾏项⽬(安装依赖很重要哦，千万不要忘记了，忘记安装后⾯出的问题就⽐较多哦~)
# 安装依赖，⾛你
$ cd itemname
$ npm install
$ npm run dev
在浏览器就可以看到效果了。
image
运⾏初始化demo，输⼊命令npm run dev；运⾏⼀下初始后的demo，弹出访问地址，如果没有问题则进⾏安装elementUI；准备好好之后，开始引⼊饿了么elementUI组件。
6：安装 elementUI
npm i element-ui -S
快捷键ctrl+c，终⽌批处理操 作吗(Y/N)，在输⼊命令npm i element-ui -S
image
注意：安装过程中出现这样的bug的时候，需要解决
image
解决办法：尝试 删除项⽬中的 package-lock.json ⽂件 和 node_modules ⽂件夹，然后再尝试 npm install.成功安装组件显⽰如下
image
7：打开main.js，加⼊element-ui的js和css
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI) //使⽤elementUI
image
=====
8：今天要⽤到的是：NavMenu 导航菜单
打开app.vue
写代码，将⽂档⾥⾯的导航栏菜单的demo复制过来进⾏修改~
<template>
<el-row class="tac">
<el-col :span="4">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航⼀</span>
</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
<el-menu-item index="1-3">选项3</el-menu-item>
<el-menu-item index="1-4">选项4</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航⼆</span>
</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-menu-item index="2-4">选项4</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">
<i class="el-icon-location"></i>vue element admin
<span>导航三</span>
</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-1">选项1</el-menu-item>          <el-menu-item index="3-2">选项2</el-menu-item>          <el-menu-item index="3-3">选项3</el-menu-item>          <el-menu-item index="3-4">选项4</el-menu-item>        </el-submenu>
</el-menu>
</el-col>
</el-row>
</template>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
},
};
</script>
<style scoped>
</style>
效果是这个样⼦的
现在这样的是⼀个静态的效果
要改成数据渲染菜单的格式。
<template>
<el-row class="tac">
<el-col :span="4">
<el-menu

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。