如何用vue实现树形菜单？

       在公司培训了2周，布置的作业是从树形，grid分页以及echarts中选一个。由于都不是很熟，就挑了第一个。本来想在网上找找参考，然后模仿着做一个，但是网上的代码多少参差不齐，写到一半没了，所以只要自己写篇博客，记录下实现过程。

一、准备工作：

1.此次树形是用vue实现的，电脑需提前配置好node.js和vue.js，具体怎么配置，这里不作说明。

      1）如果不记得自己有没有安装，可以win+R调出运行窗口，输入cmd，按enter

   

    2)输入node -v和vue -V（注意vue中的-V是大写的）

node -v

vue -V

    

     如果显示了版本号，则意为已安装。

 2.引用奥森图标，进入官网下载包

   

3.需要对vue和webpack有基本的了解

  一切准备就绪后，那么我们就开始吧

二、安装

1.首先在本地创建一个文件夹，命名为vue-tree，进入命令行窗口，然后进入到vue-tree文件夹所在位置

2.安装vue-cli，用cnpm更快

 npm i -g vue-cli

     

     

 

然后创建一个webpack项目并且下载依赖

vue init webpack vue-tutorial

  

进入到vue-tutorial文件夹里，cd vue-tutorial

npm i

然后

npm run dev

这时我们就可以在localhost:8080中查看我们的应用了。

 

 

 

 三、代码展示

下面进入重点啦~

1.打开你的main.js文件

然后在src/components文件夹下新建2个vue文件，同时新建一个common文件夹，在里面新增一个vue文件，具体看图（这里的font-aswesome是我下载的一个压缩包），layout负责布局展示，index负责树形展示，treeMenu负责渲染。

我们先配置好main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from './components/layout.vue'
import IndexPages from './common/index.vue'
import myTree from './components/treeMenu.vue'
Vue.use(VueRouter)
let router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            component: IndexPages
        }
    ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<Layout/>',
  components: { Layout }
})

 

 2.打开layout.vue文件，开始编写（这段样式用的慕课一位讲师的）。其他的组件将在<router-view></router-view>中被渲染出来。

/**
 * 页面的入口，负责页面的布局
 */

<template>
  <div>
    <div class="app-head">
      <div class="app-head-inner">
        <img src="../assets/logo.png">
         <div class="head-nav">
          <ul class="nav-list">
            <li>登录</li>
            <li class="nav-pile">|</li>
            <li>注册</li>
            <li class="nav-pile">|</li>
            <li>关于</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
      <router-view></router-view>
    </div>

    <div class="app-foot">
      <p>© 2017 cindy</p>
    </div>
  </div>
</template>

<script>

</script>

<!-- Add "