一、前言

上一节我们介绍了：vs code工具的一些特殊使用，使用vs code默认集成的Git工具快速提交代码，详细可参考博文：

原创 Vue笔记整理，11.项目-使用vs code默认集成的Git工具快速提交代码 这篇我们将介绍 项目-完成tabbar的小图标设置

 

二、完成tabbar的小图标设置

制作首页App组件

为了方便复习写代码，我们把前面实现的功能记录一下：

1. 完成 Header 区域，使用的是 Mint-UI 中的Header组件

2. 制作底部的 Tabbar 区域，使用的是 MUI 的 Tabbar.html

3. 要在 中间区域放置一个 router-view 来展示路由匹配到的组件

 

tabbar的小图标设置

如下图，我们来看看底部tabbar区域

    

左图是目前我们实现的首页效果，右图是我们要实现的目标效果。

两图的底部tabbar区域，目前文字和图标还有不同，我们现在来调一下。

底部tabbar区域，它属于App.vue 这个根组件

1、简单文字修改

改为：首页、会员、购物车、搜索

      <!-- 底部 Tabbar 区域 -->
      <nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="#tabbar">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首页</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-chat">
			<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
			<span class="mui-tab-label">会员</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-contact">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">购物车</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">搜索</span>
			</a>
      </nav>

2、图标修改为对应的
（1）

首先我们需要把购物车上面的图标，放到会员上面。

即把购物车的样式类，放在会员上

<span class="mui-icon mui-icon-contact"></span>

mui-icon 这是一个基类，肯定不是它。那么是 mui-icon-contact，

把会员上面的样式类 mui-icon-email 删除，替换为 mui-icon-contact 即可

（2）

另外这个计数"9"的小图标，应该是在购物车上面的，那么我们要挪到购物车图标上面来，

<span class="mui-badge">9</span>

即如上代码，把会员上这段样式类代码，移植到购物车即可

（3）

另外搜索的图标也不对，我们不妨猜测一下，搜索的英译一般为 search

把样式类 mui-icon-gear 改为 mui-icon-search

ok，我们猜测是对的，效果如下：

（4）

最后就是购物车的图标不对了，我们也来猜测一下：

把 mui-icon-contact 修改为 mui-icon-car 或 mui-icon-shopcar 或 mui-icon-shopping 都不对

那么怎么办呢？

因为我们制作底部的 Tabbar 区域，使用的是 MUI 的 Tabbar.html，

那么你想知道 MUI 都提供了哪些字体和图标，最好不要自己去猜测，我们可以去看它的例子。

我们之前讲了：MUI 的基本使用，我们打开它的源码文件

mui-master--->examples--->hello-mui--->examples，图标一般为icon，我们按英文字母i 或 搜索icon，

即可快速找到 icons.html、icons-extra.html，

如上图，然后我们用浏览器打开 icons.html，如下图：

然而我们并没有看到购物车的图标，那么我们就来看看 icons-extra.html，

extra额外、扩展的意思，如下图，我们找到了购物车图标

 

浏览器查看元素属性，如：样式类、宽高像素(px)等

右键，检查元素，我们点击如下图，右上角的图标，然后把鼠标放在 购物车图标 上面，

我们可以看到它的宽高为 24x24 像素(px)，它使用的样式类为：mui-icon-extra mui-icon-extra-cart

我们点击一下购物车图标，然后双击 mui-icon-extra mui-icon-extra-cart 即可对它进行复制，

然后把购物车的 mui-icon-contact 样式给替换掉

<span class="mui-icon mui-icon-extra mui-icon-extra-cart"><span class="mui-badge">9</span></span>

效果如下：

我们试着把样式类 mui-icon 给去掉，效果如下：

从效果来说，我们还是不能去掉样式类 mui-icon。

那么图标为什么出不来呢？

我们的字体和图标，肯定需要对应的字体和样式，

我们样式类给复制过来了，但是里面的样式或字体，可能没有相应复制过来。

我们在浏览器中，右键，显示网页源代码，我们可以查看 icons-extra.html 的源代码

我们会发现，需要导入一些CSS样式类，其中 mui.min.css 我们已经导入，

还需要导入一个扩展图标的CSS样式类

我们现在查看的是 icons-extra.html 的源代码，../css/icons-extra.css 说明：

在 icons-extra.html 的上一个目录，有一个css目录，它下面有一个 icons-extra.css 文件

         

 

复制  icons-extra.css 文件，把它放到项目的  src/lib/mui/css 目录下，然后在 main.js 里面进行引入

 

重新运行项目，报如下错误，缺少文件 

 

同理我们在同一级目录找到，找到 fonts 目录下的 mui-icons-extra.ttf 文件

把它复制放到项目的  src/lib/mui/fonts 目录下

然后刷新项目页面，效果如下：

 

一个小小的图标其实也涉及到很多操作。我们再来总结一下：

## 制作首页App组件

1. 完成 Header 区域，使用的是 Mint-UI 中的Header组件

2. 制作底部的 Tabbar 区域，使用的是 MUI 的 Tabbar.html

+ 在制作 购物车 小图标的时候，操作会相对多一些：

+ 先把 扩展图标的 css 样式，拷贝到 项目中

+ 拷贝 扩展字体库 ttf 文件，到项目中

+ 为 购物车 小图标 ，添加 如下样式 `mui-icon mui-icon-extra mui-icon-extra-cart`

3. 要在 中间区域放置一个 router-view 来展示路由匹配到的组件