商城项目实战要点总结记录（vue全家桶）（更新中）

                                           SPA单页面应用

---

一、封装思想

  对于一些公共组件、工具函数等可以放入专门的文件夹common。比如底部导航栏tabbar，不管进入什么路由页面，导航栏应该会一直存在。此时便可以把导航栏模块单独抽离出来，放入公共组件库中。

tabbar中，不同的项目一般会有不同数量、样式、内容的导航按钮，这里则可以考虑利用slot插槽进行封装。

1、

对于tabbar的每个按钮，考虑由图标、文本两方面构成，而且每个按钮的不同之处也大概只在于这两点。

2、

每个按钮组成一个大的slot1包裹，方便替换。其中每个slot1设置两个slot2，分别用于设置图片和文本。对于slot1和slot2，就可以分别在各自的组件中设计样式，就不会把样式带到使用tabbar的文件中，减小耦合性。

3、

slot插槽样式的设置不建议直接在slot标签上添加class，这样会出现意料不到的错误。建议在slot外面包裹一层div，对div进行样式的设置

4、

在使用时便可以依照：

<父slot>

  <子slot>

    <img>

    <p>

  <子slot>

<父slot>

来使用。