vue2.0 + element-ui 多級導航菜單

自從用餓了麼框架重構項目以來，遇到 很多問題，我都有一一記錄下來，現在特喜歡這個框架，說實話，如果你是用了vue這個技術棧的話，一定要用餓了麼的pc端框架哦，遇到問題的時候在網上百度一下，就能找到解決方案，還有很多社區可以討論，社區文檔都比較成熟，很容易上手~~

開發相關資料文檔：

Element UI手冊：https://cloud.tencent.com/developer/doc/1270
github地址：https://github.com/ElemeFE/element

vue2.0官方網站：http://caibaojian.com/vue/guide/installation.html
Element UI官方網站：https://element.eleme.cn/#/zh-CN

---

1：安裝node

2：查看node的版本號

3：安裝淘寶npm鏡像

4：安裝全局vue-cli腳手架

上面是準備工作，搭建開發環境，準備完後之後，就可以繼續構建項目了.

5：開始進入主題，初始化一個vue項目

我這裏是在d盤裏面新建一個項目，先用d:的命令，回車鍵進入d盤；回車鍵默認創建項目信息。

vue init webpack itemname

出現這樣的提示，初始化成功

根據提示輸入運行項目（安裝依賴很重要哦，千萬不要忘記了，忘記安裝後面出的問題就比較多哦~）

# 安裝依賴，走你
$ cd itemname
$ npm install
$ npm run dev

在瀏覽器就可以看到效果了。

運行初始化demo，輸入命令npm run dev；運行一下初始後的demo，彈出訪問地址，如果沒有問題則進行安裝elementUI；準備好好之後，開始引入餓了麼elementUI組件。

6：安裝 elementUI

npm i element-ui -S

快捷鍵ctrl+c,終止批處理操 作嗎(Y/N)，在輸入命令npm i element-ui -S

注意：安裝過程中出現這樣的bug的時候，需要解決

解決辦法：嘗試 刪除項目中的 package-lock.json 文件 和 node_modules 文件夾，然後再嘗試 npm install.

成功安裝組件顯示如下

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

=====

8：今天要用到的是：NavMenu 導航菜單

文檔裏面有寫的很清楚
https://element.eleme.cn/#/zh-CN/component/menu

打開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>
            <span>導航三</span>
          </template>

          <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
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-submenu v-for="(item, i) in nav" :key="i" :index="item.index">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{ item.title }}</span>
          </template>

          <el-menu-item v-for="(option, j) in item.options" :key="j" :index="`${item.index}-${j+1}`">{{option}}</el-menu-item>
        </el-submenu>
      </el-menu>
    </el-col>
  </el-row>
</template>
<script>
export default {
    data(){
        return {
            nav: [
                {
                    title: '導航一',
                    index: 1,
                    options: [
                        '選項1',
                        '選項2',
                        '選項3',
                        '選項4',
                    ]
                },
                {
                    title: '導航二',
                    index: 2,
                    options: [
                        '選項1',
                        '選項2',
                        '選項3',
                        '選項4',
                    ]
                },
                {
                    title: '導航三',
                    index: 3,
                    options: [
                        '選項1',
                        '選項2',
                        '選項3',
                        '選項4',
                    ]
                },
            ]
        }
    },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
<style scoped>
</style>

完成~~