vue项目底部导航栏的实现

vue cli4项目目录结构(操作后)

项目配置

路径别名配置

新建一个vue.config.js文件

module.exports = {
   
  configureWebpack: {
   
    resolve: {
   
      alias: {
   
        'components': '@/components',
        'content': 'components/content',
        'common': 'components/common',
        'assets': '@/assets',
        'network': '@/network',
        'views': '@/views',
      }
    }
  }
}

底部导航栏组件编写

文件夹目录src/components/common/tabbar/TabBar.vue

<template>
  <div class="tab-bar">
    <slot></slot>
</div>
</template>
<script>
	export default {
   
		name: "TabBar"
	}
</script>
<style scoped>
  .tab-bar {
   
    /* 本身的样式 */
    background-color: #f6f6f6;
    height: 49px;
    border-top: 1px solid #eee;
    box-shadow: 0px -1px 1px rgba