vue怎么将ui设计的图标导入

Posted 2023-03-27

参考技术A 我们利用vue-cli创建一个vue项目，然后引入element-ui，不会的请看下面的链接想要使用element的icon图标，我们前往element-ui官网看看怎么使用我们在官网找到你要使用的icon图标，然后我们复制其代码，放到项目中，想要换其他图标我们更改其对应的class就可以了代码都写好以后，我们打开命令行工具，进入对应的项目，输入npm run dev，运行这个项目，成功会出现一个访问的地址打开我们的浏览器，然后输入访问的地址127.0.0.1:8080，就可以查看使用图标的效果了

UI设计中如果图标大小不一致一般怎么处理?

首先，这种方法制作出来的图标大小为48px*48px，需要其他尺寸的图标可以做完之后等比放缩即可，放缩过程中可能需要注意半像素（见下文）的问题。

Material Design把图标的形状类型分为三种：圆形、方形和矩形。其中圆形的半径为44px，方形的边长为38px，矩形为44px*32px。

怎么判定图标应该套用那种尺寸的？有一种方法是：将图标与上图的模板居中对齐，然后中心不动，放大图标使之图标依次碰到三种形状的边界，填充最满的那个形状的尺寸就是该图标需要规定的尺寸。如下图，依次将设置图标放大并使之接触到不同形状的边界，可以看到在圆形里，该图标最大，证明设置图标最匹配圆形，所以使用圆形的尺寸44px*44px。

下面正式定义尺寸部分：

1. 如果形状为方形，则图标大小为38px*38px，若只是近似的方形，则取较小的边为38px，等比放缩。

2. 如果形状为圆形，则取图标大小为44px*44px，若只是近似的圆形，取较大的边为44px，等比放缩。

3. 如果形状为矩形，先令短边为32px，等比放缩图标，若此时长边大于或者约等于44px，则取长边为44px，等比放缩；否则，令长边为y，取长边为（44+y）/2，再向上取整，然后进行等比放缩。

根据以上的规则制定出来的图标，大小就会比较统一。如下图，左边是调整前，右边是调整后。（不过也有人反馈说看不太出来o(╯□╰)o）

顺便把这次整理图标遇到的坑也记录一下：

1. 关于半像素的问题。

半像素的问题主要是在进行Android不同尺寸适配的时候，有时候开发会要求图标不能出现非整数的尺寸，不然可能图标就会糊掉。所以在设计Android端使用的图标时，注意一下这个问题。适当地对尺寸进行四舍五入一下即可。

2. 关于iconfont的问题。

现在大部分团队都会将图标转换为iconfont，这样可以缩小整个项目的大小。图标在转换为iconfont的时候，会忽略所有的线条（包括填充色块的边）。所以，如果图标中有线条，则需要利用高度为1px的矩形代替，色块的边长需要用色块叠加来替代。

3. 关于对齐的问题。

如果有仔细看，我这个方法指定的图标大小为48px*48px，但是里面有内容的部分，比如说圆形，就只会占据44px*44px，这时候我们当然会希望把图形放置在图标的中央。免不了就会使用对齐工具，咻咻两下，一个上下居中对齐，一个左右居中对齐，搞掂。但是，慢着，如果仔细发现一下，你会发现看上去并不是居中的。这是由于人的视觉错觉造成的，这时候就需要进行适当的调整，通过自己的视觉判断来进行对齐。

4. 关于颜色统一的问题。

一般而言，图标设定为同一个色值（比如#999999）就能统一颜色，但是也有遇到过某个图标会显得颜色比较浅，具体原因未知，这时候就需要进行特殊的处理，比如设定更加深的颜色，比如#333333，具体通过自己视觉调整即可。

参考技术A 1、在桌面空白处点击鼠标右键
2、在右键菜单中选择屏幕分辨率
3、在弹出的对话框中找到分辨率
4、点击下拉按钮
5、在下拉菜单中选择合适的分辨率，点确定。
6、如果桌面显示出来的大小不适合，在询问是否保存的时候选否。重复第4、5项。
7、如果桌面内容大小适合，点保存更改就行了。
如果以上方法不行，或分辨率设置里为灰色，则是显卡驱动问题，下载一个驱动精灵软件，点更新驱动，安装完成后，再根据修改分辨率的方法调整到合适的分辨率即可。
确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，但尺寸比较大。屏幕分辨率高时（例如1600 x 1200），在屏幕上显示的像素多，但尺寸比较小。
显示分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平方向含有像素数为160个，垂直方向像素数128个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。 参考技术B 1、在桌面空白处点击鼠标右键
2、在右键菜单中选择屏幕分辨率
3、在弹出的对话框中找到分辨率
4、点击下拉按钮
5、在下拉菜单中选择合适的分辨率，点确定。
6、如果桌面显示出来的大小不适合，在询问是否保存的时候选否。重复第4、5项。
7、如果桌面内容大小适合，点保存更改就行了。