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

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 导航菜单

文档里面有写的很清楚
https://element.eleme.cn/#/zh-CN/component/menu

打开app.vue
写代码，将文档里面的导航栏菜单的demo复制过来进行修改~

效果是这个样子的

现在这样的是一个静态的效果
要改成数据渲染菜单的格式。

完成~~