在VUE的项目中使用字体图标以及Stylus

时间:2021-09-06 05:47:46

字体图标可以从阿里巴巴的矢量图标库里下载:

https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4&type=1

比方说我需要一个搜索图标,可以把其先添加到购物车

在VUE的项目中使用字体图标以及Stylus

 在项目里可以把添加过去的icon下载下来

 在VUE的项目中使用字体图标以及Stylus

下载下来的压缩包解压出来有这么多文件:

在VUE的项目中使用字体图标以及Stylus

其中有用的就这一些:

在VUE的项目中使用字体图标以及Stylus

打开VUE工程的\src\assets\styles目录(具体目录各个项目可能不同,总之放在和样式有关的下面就对啦)

新建一个iconfont文件夹保存全部的字体图标,把iconfont.css单独拿出来和其他css放到一起

在VUE的项目中使用字体图标以及Stylus

打开iconfont.css文件,把这个文件引用的字体图标文件路径修改正确,data前缀的不用改

在VUE的项目中使用字体图标以及Stylus

在main.js里引入这个css,在之前我也引入了fastclick解决移动端点击事件(需要事先cnpm install fastclick --save),reset.css,border.css具体做什么用的下图注释里写明了

在VUE的项目中使用字体图标以及Stylus

 

然后在组件里面需要使用字体图标的元素上面加上iconfont类名

在VUE的项目中使用字体图标以及Stylus

在VUE的项目中使用字体图标以及Stylus

把复制出来的代码直接粘贴到元素中就行啦,当然也可以使用前面css自动生成出来的class类名

在VUE的项目中使用字体图标以及Stylus

 到此为止字体图标的使用基本就结束了

接下来使用stylus快速编写样式代码,和使用less,scass差不多,可以在存放css的文件夹新建一个global.styl文件,用于存储一些公共的变量

在VUE的项目中使用字体图标以及Stylus

引用一下这个文件,注意一下stylus的样式嵌套是不用加中括号和冒号分号的,之前写less写习惯了才加上去的

在VUE的项目中使用字体图标以及Stylus

在这里reset.css里吧font-size定义成了50px,所以如果设计稿是750px的宽度的话直接把设计稿上的宽度/100加上rem就是适合的单位啦

因为header.vue组件在main.js里被引用,所以引用stylus的路径可以这样改写

在VUE的项目中使用字体图标以及Stylus

由于这个路径经常用到,所以可以在webpack,base,config.js中将其保存起来

在VUE的项目中使用字体图标以及Stylus

对webpack的修改都需要重启服务器,否则会报错,这里需要注意

有了这个变量就可以直接在需要这个路径的地方做修改了

在VUE的项目中使用字体图标以及Stylus

修改如下:

在VUE的项目中使用字体图标以及Stylus

如下

在VUE的项目中使用字体图标以及Stylus

到这里一个头部搜索的组件就做完了

在VUE的项目中使用字体图标以及Stylus