手把手带你做移动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

      
        
        首页
      
      
        
        会员
      
      
        
          9
        
          购物车
      
      
        
        设置
      
    

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