前言
利用vue封装自己的导航栏
我的组件需要完成的结果如下：
一、项目结构
首先我们利用vue-cli脚手架工具创建了我们的vue项目，这时候我们会发现他已经将基本的项目结构划分完成了，这个时候我们需要根据自己的实际项目需求完善自己的项目结构。(创建vue项目见前博文)。既然我们要封装一个导航栏那么我们应该将这个组件放在什么地方呢？为了方便管理，我们又该如何设置项目结构呢？根据以上问题我们可以在components下创建一个common文件夹，用来存储抽离出来的组件。然后再其下创建我们的navbar文件夹，并且创建NavBar.vue组件
二、明确组件特征
既然我们要封装一个组件，那么在封装组件之前我们应该知道我们要封装的组件具有怎样的特征，在这我们要封装一个导航栏，那么导航栏有什么特征？
常见的导航栏就是像如上的结构：一个元素标签下许多的小的元素，所以这里我们可以利用slot插槽来完成这个结构
这里我将导航栏分为了左，中，右三个部分，使用具名插槽实现。(你可以根据你自己的项目来选择封装的结构)。
这个时候我们只需要向插槽中插入数据就可以了。
其次，每一个item其实基本上都具有相同的结构的比如说，上面一个图片，下面一个文字。
所以这个时候我们可以将这个item抽离出来让他成为一个新的组件，并且这样的好处非常明显，在其他项目中需要使用时，可以直接调用，而且代码维护也非常方便。所以我们在common文件下navbar文件中再创建一个NavBarItem.vue组件。
我的没有加上图片，根据自己需求加上即可。封装完成后只需要在当你需要使用时导入这个组件，并在components中注册就可以了。
由于我的项目有其他需求所以我再封装了一个CenterNav.vue组件用来实现导航栏中间部分多个item问题。并且同样用到slot插槽。
最后我们在App.vue中使用我们封装好的组件。
大家可能会发现并没有而是一个MainNavBar.vue组件。
这里之所以这样做是为了减少App.vue中代码量太多。项目结构不够清晰。所以再抽离一次。
在这个组件中我们可以清除的看到我们用了哪些组件，并且我们只需在这些组件中填上数据就可以了。而且如果在其他项目中我们需要使用相同的导航栏。我们可以直接复制过去，然后导入你新项目的数据就可以了。这也是封装的好处。
css部分就不写了自己参悟，这东西只能慢慢积累。我使用的是fixed定位与flex布局。
总结
1.明确项目结构
2.明确组件特性
3.根据需求利用插槽将每一个小的部分封装成不同的组件，将每一个细节都考虑到，那么最后我们只需要利用组件填数据就完成了。
总之，封装思想不可或缺，他能带给我们更多代码维护上的便捷，同时更能理清你的项目思路。