手把手带你做移动web项目-商城（vue）

代码
先下一下模板，从这里开始做。
照着README.md把项目跑起来

image.png
头部，看MintUI文档，
https://mint-ui.github.io/#!/zh-cn
选择Header
image.png image.png
头部盖住了中间的位置，在最外围的div设一个class，再把这class padding-top: 40px就可以解决盖住的问题
底部
使用了MUI，https://github.com/dcloudio/mui 使用方式类似bootstrap，去里面找例子看，看到喜欢的右击查看源码，引过来，没有相关文件的就去找相关的文件，放到项目中。
./sr/main.js

import './lib/mui/css/mui.min.css';
import './lib/mui/css/icons-extra.css';

./src/App.vue

<nav class="mui-bar mui-bar-tab">
      <a class="mui-tab-item mui-active" href="[#tabbar](#tabbar)">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" href="[#tabbar-with-chat](#tabbar-with-chat)">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">会员</span>
      </a>
      <a class="mui-tab-item" href="[#tabbar-with-contact](#tabbar-with-contact)">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
          <span class="mui-badge">9</span>
        </span>
          <span class="mui-tab-label">购物车</span>
      </a>
      <a class="mui-tab-item" href="[#tabbar-with-map](#tabbar-with-map)">
        <span class="mui-icon mui-icon-search"></span>
        <span class="mui-tab-label">设置</span>
      </a>
    </nav>

image.png

想更换图标可以在 mui-master/examples/hello-mui/examples里面搜索icon，键盘敲一下就能定位到
改完图标现在我们要的改的是点击哪个tabBarItem就高亮

先把a标签改成router-link,href改成to="/.."

MUI高亮的类是mui-active的，我们在路由那边覆盖一下就可以产生点谁谁高亮的效果
./src/router.js

linkActiveClass: 'mui-activ'

image.png