vue2+element-ui 记录5

vue2+element-ui主页优化（仅适用于新手）

1.在views => layout文件夹下的index.vue中，根据element-ui框架中“NavMenu 导航菜单”组件，找到模板代码，复制到自己的侧边栏内容中，再修改一下，让我们的侧边栏变得简单，代码如下图：

2.上图中我们用到了element-ui框架的el-menu、el-submenu、el-menu-item三个标签，它们分别对应组件是Menu、Submenu、MenuItem，所以我们需要在src => utils => elementui.js文件中加入element-ui组件(谁叫我们是按需加载呢，老实添加吧)，代码如下图：

3.刷新浏览器（其实不用刷新，哈哈），看到效果图如下：

4.这里出现了样式问题，（咦，为啥官网没有呢，不懂，有道友知道么？），因为在布局的时候为el-aside标签加了一个width=“160px”（可能是因为这个原因？？），当去掉这个宽度设置时，样式似乎就正常了（可以亲自试一试，勉强算正常吧），但这实际上是逃避了问题，而不是解决了问题，老板就要这边的宽度是160px,而且有可能更短，那怎么办？当然是解决它，所以根据浏览器的查看元素功能，发现菜单项的最小宽度为200px（这里请道友仔细操作就能发现），所以我们需要改变样式，如下图：

5.再次看页面，发现侧边栏正常了。注意：如果需要让宽度再短或者高度行高变小，则还需要改变菜单项的样式，具体需要道友仔细挖掘。
6.此时，侧边栏的菜单引入完成，但还不能左点右显（即点击左侧菜单，右侧主体区域显示对应路由页面内容）。那么先在views下新建组件UserList（即新建文件夹user-list，并在其下新建文件index.vue），如下图：

7.在src => router => index.js文件中，增加用户列表的路由地址，内容如下图：

8.最后，在views => layou => index.vue文件中进行修改，内容如下图：

9.这才是最后，点击左侧菜单“用户列表”，查看右侧主体内容是否跟着改变，我操作效果图如下：

10.顶部的菜单栏确实难看，忍受不了了，改了一下（记得在element-ui.js文件加入对应的组件，不然会报错的哦），代码如下图：

对应样式（我这里简单写了一下，如果要更好看，可以随道友diy，最终的顶部菜单效果图就不展示了哈！），如下图：

注意点
1.以上内容虽然简单，而且啰嗦，而且啰嗦，但也要仔细看哦，感觉对于新手很不错！
2.饭要一口一口吃，问题要一个一个解决，不要盲目复制，实践才是检验的标准，好吧，其实就是我懒！

活到老，学到老，学无止尽！欢迎大家相互讨论，相互学习！不喜勿喷！