代码部分

src\assets\iconfont\iconfont.css

`.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
} `

src\components\common\baseBar\index.vue
`<template>
<div id="base-bar">

  <div class="home">
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-dibudaohang_shouye"></use>
    </svg>
    <span>首页</span>
  </div>

  <div class="classify">
    <svg class="icon" aria-atomic="true">
      <use xlink:href="#icon-dibudaohang-fenlei"></use>
    </svg>
    <span>分类</span>
 </div>

 <div class="shop-car">
   <svg class="icon" aria-atomic="true">
     <use xlink:href="#icon-dibudaohang_gouwuche"></use>
   </svg>
   <span>购物车</span>
 </div>

 <div class="me">
   <svg class="icon" aria-atomic="true">
     <use xlink:href="#icon-dibudaohang_wode"></use>
   </svg>
   <span>我的</span>
 </div>

</div>
</template>

<script>
export default {
name: '#baseBar'
}
</script>

<style lang="sass" scoped>

base-bar

position: fixed;
bottom: 0px;
border-radius: 1px soild #cccccc;
width: 100%;
heihgt: 50px;
background-color: #ffffff;
display: fiex;

</style>`

src\main.js
`import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入阿里云图标
import './assets/iconfont/iconfont.js'
import './assets/iconfont/iconfont.css'

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
`