九宫格实现

1.router.js

设置路由进入根路径时将页面重定向到home 锚

2. home.vue

在home组件中放入九宫格元素，内容来自MUI 库中;由于组件定义时需要一个根元素将所有的元素包裹起来，在外部在定义一个容器即可

<div class="hoemContainer">
<!--     轮播图区域
 -->    <mt-swipe :auto="2000">
      <mt-swipe-item v-for="item in datalist" :key="item.id">{{item.title}}</mt-swipe-item>
    </mt-swipe>
<!--     九宫格区域-->

<ul class="mui-table-view mui-grid-view mui-grid-9">

                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="home/news">
                            <span class="mui-icon mui-icon-home"></span>
                            <div class="mui-media-body">新闻资讯</div></router-link></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-email"><span class="mui-badge">5</span></span>
                            <div class="mui-media-body">Email</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-chatbubble"></span>
                            <div class="mui-media-body">Chat</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-location"></span>
                            <div class="mui-media-body">location</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-search"></span>
                            <div class="mui-media-body">Search</div></a></li>
                    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
                            <span class="mui-icon mui-icon-phone"></span>
                            <div class="mui-media-body">Phone</div></a></li>
</ul>

3. webpack 打包出错

由于MUI 的css样式中涉及到一些ttf字体图标等，需要制定打包规则

{test:/\.(ttf|woff|woff2|jpg|png|gif|jpeg)$/,use: 'url-loader?limit=102400&name=[name].[ext]'},