vue-element-admin开发移动端，添加底部导航栏

1）此vue项目打包命令 npm run build：prod （"vue-cli-service build"）看package.json个人配置或许不同

2）添加底部导航栏：

1.src/components下创建一个phone文件

文件目录为：

|——phone

|——components

|———TabBar.vue

|———TabBarItem.vue

|——MainTabBar.vue

TabBar.vue和TabBarItem.vue为MainTabBar.vue的子组件。

TabBar是导航栏的主框架，包裹整个导航栏

TabBarItem内写入插槽和一些方法。

MainTabBar.vue主要用来展示，里面写了导航栏的静态样式

TabBar.vue

<template>
  <div id="tab-bar">
    <slot />
  </div>
</template>

<script>
export default {
  name: 'TabBar'
}
</script>

<style scoped>
  #tab-bar {
    display: flex;
    background-color: #f6f6f6;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    box-shadow: 0 -3px 10px rgba(100, 100, 100, .2);
  }
</style>

TabBarItem.vue

<template>
  <div class="tab-bar-item" @click="itemClick">
    <div v-if="!isActive" slot="item-icon">
      <slot name="item-icon" />
    </div>
    <div v-else slot="item-icon-active">
      <slot name="item-icon-active" />
    </div>
    <div slot="item-text" :style="activeStyle">
      <slot name="item-text" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabBarItem',
  props: {
    path: String,
    activeColor: {
      type: String,
      default: 'blue'
    }
  },
  data() {
    return {
    }
  },
  computed: {
    isActive() {
      return this.$route.path.indexOf(this.path) !== -1
    },
    activeStyle() {
      return this.isActive ? { color: this.activeColor } : {}
    }
  },
  methods: {
    itemClick() {
      this.$router.replace(this.path)
    }
  }
}
</script>

<style scoped>
  .tab-bar-item {
    flex: 1;
    text-align: center;
    height: 49px;
    font-size: 14px;
  }
  .tab-bar-item img {
    margin-top: 3px;
    width: 24px;
    height: 24px;
    /* 去掉图片与文字之间的空隙 */
    vertical-align: middle;
    margin-bottom: 2px;
  }
</style>

MainTabBar.vue

<template>
  <tab-bar>
    <tab-bar-item path="/home" active-color="">
      <img slot="item-icon" src="../../assets/tabbar/home.png" alt="">
      <img slot="item-icon-active" src="../../assets/tabbar/home_active.png" alt="">
      <div slot="item-text">首页</div>
    </tab-bar-item>
    <tab-bar-item path="/category" active-color="">
      <img slot="item-icon" src="../../assets/tabbar/category.png" alt="">
      <img slot="item-icon-active" src="../../assets/tabbar/category_active.png" alt="">
      <div slot="item-text">分类</div>
    </tab-bar-item>
  </tab-bar>
</template>

<script>
import TabBar from './components/TabBar'
import TabBarItem from './components/TabBarItem'
export default {
  name: 'MainTabBar',
  components: {
    TabBar,
    TabBarItem
}
}
</script>

<style scoped>
</style>

2.在src/views下创建phone文件夹设置下vue页面（简单的设置两个页面）

此处为目录为：

|——phone

|——category

|———category.vue

|——home

|———home.vue

3.在src/router/index.js中添加这两个路由，由于是必须展示的所以写在constantRoutes下

  {
    path: '/home',
    component: () => import('@/layout/index')（此处引用layout目录是因为该文件为登录后的框架页面，不是类似于点击左侧路由菜单出现的内置页面）
  },
  {
    path: '/category',
    component: () => import('@/views/phone/category/category')
  },

4.以上操作完成后则把MainTabBar引入到App.vue中

div内添加<MainTabBar></MainTabBar>标签

<script>内进行import，再在components内注册上。
export default {
  name: 'App',
  components: {
    MainTabBar,
  }
}

5.打开命令行，输入npm run build：prod进行打包，打包完成后会生成一个dist文件夹

打开HBuilder X新建项目 选择5+APP，创建项目，然后删除里面的 css、img、js、index.html，

然后把vue项目打包后的dist文件夹内的所有东西复制到该项目中，进行真机测试。

项目若出现非路径错误，建议重新下载一个能跑的vue-element-admin，然后把其中的node_modules复制到你所要用的框架中

（因为一些依赖修改起来较为麻烦。）

关于底部导航栏图片不显示问题

1）本地静态图片若存放与public文件夹下，调用该图片的src路径写成绝对路径。

但，有可能会导致该图片在pc端显示正常。在手机端显示异常。

2）解决方法：

可参考：https://blog.csdn.net/m0_58040147/article/details/124738818

把本地静态图片放置在src/assets下，并且在使用该图片的src路径内以../../assets/xx/xx.png(或者其他图片类型)