mpuve中自定义tabbar

由于之前使用vue进行开发，然后就尝试使用了mpvue类似的进行小程序的开发基本上能与vue语法相识，而wepy则是类似vue语法感觉不像了，所以选用了mpvue, 之前也有通过原生的小程序语法进行开发过。因为原生小程序中现在可以自定义tabbar了，所以就直接上手了。对在mpvue中自定义tabbar的尝试。

---

相关设置配置

1. 在相关app.json中配置list（list中配置项数得跟下面的custom-tab-bar中的index.js渲染的tabar数据条数相对应）并且设置custom为true。

2. 在pages中建立custom-tab-bar目录并且按照微信小程序官方文档写的自定tabbar样式（原生小程序写法）,在跳转路由的使用小程序的tabbar跳转事件switchTab。

3. 配置修改mpvue中打包在build下的webpack.base.conf.js文件添加一项new CopyWebpackPlugin直接进行拷贝不进行mpvue的进行打包。如下：

  new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../src/pages/custom-tab-bar'),
        to: path.resolve(config.build.assetsRoot, './custom-tab-bar'),
        ignore: ['.*']
      }
    ])

4. 相关的选中事件要通过tabbar中对应的页面在onShow中通过getTabBar获取tabbar的实例然后进行设置值改变选中状态。（最初我直接通过小程序中component中的js直接跳转后改选中的状态发现不行，后来通过mpvue官方的github的issuss通过大神指点之后才知道原来要通过对应的页面获取getTabBar实例改变data然后实现正确的选中）。

Build Setup

# 安装依赖
 npm install

# 开发时构建
npm dev

# 打包构建
npm build