今天用vue的脚手架做了一个小demo，就是实现移动项目底部的导航栏和它们之间的点击切换。一开始的时候觉得挺难的，然后就面向百度编程，结果实现了这么一个切换效果，嘿嘿！
这个项目是结合了element-ui组件库做的，主要就是用了它里面的一些图标。
1，首先就是下载这个element-ui（具体怎么使用element我就不废话了，官方文档写的很清楚了）
2，然后在main.js文件中注册，我是直接全局注册的，没有按需引入
3，然后在components文件夹里面创建一个footerBar.vue的文件，具体代码（如下图）
看到上面的router-link标签没？它就是相当于一个a标签，但是router-link要加一个to，后面跟随你的地址
4，footerBar文件写好了就是配置路由啦！在router文件夹的index.js文件中进行路由配置
根据前面的footerBar的设定和路由的配置，就需要创建home/classification/shop和persion四个文件了，这四个文件就是界面展示文件，在views文件夹里面创建。
这里展示的就是shop文件了，其他三个文件和它也是一样的操作。
下面我们看一下效果图
这样footerBar就是实现了。
每天学习一点点，做一个快乐的程序员。
相关文章：