如何为mpvue项目添加底部tab

文章https://vip.kingdee.com/article/10314中已经实现快速创建一个mpvue项目，在这里以此为基础实现如何添加底部tab。
一.参考项目实例

1.创建后的项目界面如下图：

从图中可以看出已经有首页，订单为例，由此，我们只需要做适当的更改即可。

2.查看图片位置，修改为自己需要

把tabs文件夹下的图片，放入自己需要的。

3. 用webStorm打开项目中的src文件夹

   
   打开webStorm

选中src文件

4.修改webstorm下的app.json

 "tabBar": {
    "color": "#999",
    "backgroundColor": "#fafafa",
    "selectedColor": "rgb(241,99,8)",
    "borderStyle": "white",

    "list": [{
      "text": "首页",
      "pagePath": "pages/index/main",
      "iconPath": "static/tabs/tab1.png",
      "selectedIconPath": "static/tabs/tab_1.png"
    }, {
      "text": "购物车",
      "pagePath": "pages/logs/main",
      "iconPath": "static/tabs/tab3.png",
      "selectedIconPath": "static/tabs/tab3_.png"
    },
    {
      "text": "我的",
      "pagePath": "pages/logs/main",
      "iconPath": "static/tabs/tab4.png",
      "selectedIconPath": "static/tabs/tab4_.png"
    }],

    "items": [{
      "name": "首页",
      "pagePath": "pages/index/main",
      "icon": "static/tabs/home.png",
      "activeIcon": "static/tabs/home-active.png"
    }, {
      "text": "购物车",
      "pagePath": "pages/logs/main",
      "iconPath": "static/tabs/tab3.png",
      "selectedIconPath": "static/tabs/tab3_.png"
    },
    {
      "text": "我的",
      "pagePath": "pages/logs/main",
      "iconPath": "static/tabs/tab4.png",
      "selectedIconPath": "static/tabs/tab4_.png"
    }],
    "position": "bottom"
  }

5. 打开webstorm终端执行 npm run dev

   
   
   

   6.微信开发者工具运行后的结果

   
   运行后的结果

注意事项

1. 开发时，微信开发者工具和一个自己熟悉的编辑器（例webStorm）
2. 编辑器打开项目文件下单src文件夹，终端执行npm run dev后，微信开发者工具项 目也会重新编辑，代码也会随之更改。
   3.新增的页面需要重新 npm run dev 来进行编译。