+-
代码部分
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')
`