8.图标组件的编写

可以在这里找到自己想要的图标

iconfont-阿里巴巴矢量图标库

1. 提前理清布局,可分为1个大div与4个小div

2. 创建IconList.vue文件

8.图标组件的编写_第1张图片

3. 在IconList.vue中根据布局进行编写,完整代码如下



4. 在HomeView.vue中引入、注册、显示




5. 启动项目,之后写style,使用弹性布局,完整代码如下

6. 再次启动项目,对比写style前后效果图

8.图标组件的编写_第2张图片     8.图标组件的编写_第3张图片

补充:比行内样式的优先级更高的 !important

background-color: #eb3729 !important;

你可能感兴趣的:(vue3,vue)